DEV Community

Cover image for Create a Infinite Scrolling Marquee with HTML and CSS
Kaja Uvais
Kaja Uvais

Posted on

3

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>
Enter fullscreen mode Exit fullscreen mode

Each contains a skill or item, and the two identical 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

.

Seamless Looping:

Two identical

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 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.

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (2)

Collapse
 
l1amcarter profile image
Liam Carter

Hi! I’ve done something similar, and it’s such a vibe for making a site look more alive. The trick with the two identical

s? Genius move for that infinite scroll effect—it’s so smooth, it’s like butter. 🧈

Pro tip for anyone giving this a shot: if you want your marquee to be mobile-friendly, throw in some CSS media queries. Adjust the width of .scroll and tweak the --t value for slower or faster scrolling on smaller screens. Keeps everything looking clean and pro.

Also, shoutout for accessibility! If you wanna be a real one, add support for users who prefer less motion. Toss in something like this:

@media (prefers-reduced-motion: reduce) {
  .scroll div {
    animation: none;
  }
}

It’s a small thing, but it makes your site more inclusive. Plus, that hover effect you added?

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thanks for sharing

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay