Create a Infinite Scrolling Marquee with HTML and CSS

Adding animations to your website can make your website more interactive and wonderful. one of the best way to achieve this is by creating a scrolling marquee — a very sleek animation that slides over smooth content like skills or tools, bringing your website stand out.

In this tutorial, I’ll show you how to create a Infinite scrolling marquee using just HTML and CSS.

What is a Marquee?

A scrolling marquee is a simple animation where content moves across the screen endlessly. This can be used in order to showcase text like skills, technologies and features.

Let's Code it

HTML Structure

First create the html structure 

  
<div class="scroll" style="--t:20s">
  
  <div>
  
    <span>HTML</span>
  
    <span>CSS</span>
  
    <span>Javascript</span>
  
    <span>React JS</span>
  
    <span>Node JS</span>
  
    <span>SQL</span>
  
    <span>Git</span>
  
    <span>AWS</span>
  
    <span>AZURE</span>
  
  </div>
  
  <div>
  
    <span>HTML</span>
  
    <span>CSS</span>
  
    <span>Javascript</span>
  
    <span>React JS</span>
  
    <span>Node JS</span>
  
    <span>SQL</span>
  
    <span>Git</span>
  
    <span>AWS</span>
  
    <span>AZURE</span>
  
  </div>
  
</div>
  


  
<div class="scroll" style="--t:15s">
  
  <div>
  
    <span>Typescript</span>
  
    <span>Redux</span>
  
    <span>Bootstrap</span>
  
    <span>Material UI</span>
  
    <span>Tailwind</span>
  
    <span>SCSS</span>
  
    <span>Webpack</span>
  
    <span>Babel</span>
  
    <span>NPM</span>
  
    <span>Jenkins</span>
  
  </div>
  
  <div>
  
    <span>Typescript</span>
  
    <span>Redux</span>
  
    <span>Bootstrap</span>
  
    <span>Material UI</span>
  
    <span>Tailwind</span>
  
    <span>SCSS</span>
  
    <span>Webpack</span>
  
    <span>Babel</span>
  
    <span>NPM</span>
  
    <span>Jenkins</span>
  
  </div>
  
</div>
  


  
<div class="scroll" style="--t:15s">
  
  <div>
  
    <span>Rest API</span>
  
    <span>Docker</span>
  
    <span>Linux</span>
  
    <span>SEO</span>
  
    <span>Agile Methedology</span>
  
    <span>Jira</span>
  
    <span>SDLC</span>
  
  </div>
  
  <div>
  
    <span>Rest API</span>
  
    <span>Docker</span>
  
    <span>Linux</span>
  
    <span>SEO</span>
  
    <span>Agile Methedology</span>
  
    <span>Jira</span>
  
    <span>SDLC</span>
  
  </div>
  
</div>

Each <span> contains a skill or item, and the two identical <div> blocks ensure continuous scrolling.

CSS

Now add the css style for scrolling 

  
* {
  
  margin: 0;
  
  padding: 0;
  
  box-sizing: border-box;
  
  font-family: "Montserrat", sans-serif;
  
}
  


  
body {
  
  display: flex;
  
  justify-content: center;
  
  align-items: center;
  
  min-height: 100vh;
  
  background: #161616;
  
}
  


  
.scroll {
  
  position: relative;
  
  display: flex;
  
  width: 700px;
  
  overflow: hidden;
  

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);
  
  
}
  


  
.scroll div {
  
  white-space: nowrap;
  
  animation: animate var(--t) linear infinite;
  
}
  


  
.scroll div:nth-child(2) {
  
  animation: animate2 var(--t) linear infinite;
  
}
  


  
@keyframes animate {
  
  0% {
  
    transform: translateX(100%);
  
  }
  
  100% {
  
    transform: translateX(-100%);
  
  }
  
}
  


  
@keyframes animate2 {
  
  0% {
  
    transform: translateX(0);
  
  }
  
  100% {
  
    transform: translateX(-200%);
  
  }
  
}
  


  
.scroll div span {
  
  display: inline-flex;
  
  margin: 10px;
  
  padding: 5px 10px;
  
  border-radius: 5px;
  
  text-transform: uppercase;
  
  background: #333;
  
  color: #fff;
  
  transition: 0.5s;
  
}
  


  
.scroll div span:hover {
  
  background: #f52789;
  
  cursor: pointer;
  
}

How It Works

Smooth Animation:

The @keyframes rule specifies the smooth scrolling effect, and the animation property applies it to the <div>.

Seamless Looping:

Two identical <div> sections create the illusion of endless scrolling by starting one block mid-way.

Hover Effect:

When you hover on an item, its background changes to this bright pink (#f52789).

Customize Your Marquee

Change the Items: Update the <span> tags to display your own content, like services, tools, or testimonials.

Adjust Speed: Use the --t CSS variable to control the animation duration. A smaller value makes it faster.

Change Colors: Customise the background and text color to suit your theme on the website.

Conclusion

A scrolling marquee is one simple yet powerful feature to make your website engaging. This tutorial will teach you how to easily create a scrolling marquee tailored to your content and design preferences. Try this out.