Marquee Like Content Scrolling using HTML CSS and JavaScript

Step into the dynamic world of Coding Torque, where innovation meets seamless user experience! Today, get ready to embark on an exciting journey as we unveil the art of crafting captivating Marquee-Like Content Scrolling using the powerful trio of HTML, CSS, and JavaScript. Say goodbye to static content and hello to the immersive allure of smoothly scrolling text and elements, adding a touch of flair and interactivity to your web projects. Whether you’re a coding enthusiast eager to learn new techniques or a seasoned developer looking to elevate your designs, this tutorial is your gateway to unleashing the potential of engaging content presentation. Join us as we dive into the realm of Marquee-Like Content Scrolling, where creativity knows no bounds and your web pages will come alive with captivating motion. So, buckle up for an unforgettable ride, as we unleash the true torque of coding prowess!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Marquee Like Content Scrolling using HTML CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="marquee">
    <ul class="marquee-content">
      <li><i class="fab fa-github"></i></li>
      <li><i class="fab fa-codepen"></i></li>
      <li><i class="fab fa-free-code-camp"></i></li>
      <li><i class="fab fa-dev"></i></li>
      <li><i class="fab fa-react"></i></li>
      <li><i class="fab fa-vuejs"></i></li>
      <li><i class="fab fa-angular"></i></li>
      <li><i class="fab fa-node"></i></li>
      <li><i class="fab fa-wordpress"></i></li>
      <li><i class="fab fa-aws"></i></li>
      <li><i class="fab fa-docker"></i></li>
      <li><i class="fab fa-android"></i></li>
    </ul>
</div>

CSS Code

Create a file style.css and paste the code below.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #111;
  color: #eee;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}

JavaScript Code

Create a file script.js and paste the code below.

const root = document.documentElement;
const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
const marqueeContent = document.querySelector("ul.marquee-content");

root.style.setProperty("--marquee-elements", marqueeContent.children.length);

for(let i=0; i<marqueeElementsDisplayed; i++) {
  marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
}

Final Output

Marquee Like Content Scrolling using HTML CSS and JavaScript

Written by: Piyush Patil

Code Credits: Coding_Journey

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖