DEV Community

Cleopatra E.
Cleopatra E.

Posted on

Pure CSS Continuous Horizontal Text Scroll

While building my personal site as part of the DigitalOcean App Platform Hackathon, I had to think of a creative way to show off my skills. I wanted some motion, but nothing overly complicated.

After moments of thinking and tinkering, I finally decided to use a continuous horizontal text scroll, sort of like those shown on TV news channel highlights. You can see the scrolling text in action on my website. I used two lines of text. The first line shows my skills and the second line shows the software, tools, and programming languages I'm familiar with.

The cool part about this is we can create it using only HTML and CSS, particularly using the translate property. No JavaScript code is necessary.

View the full code at this JSFiddle. Or continue to read to understand how the code works.

To begin, write your HTML code. Feel free to write whatever text you prefer between the div tags:

  <div class="skills">
        Front end Web development • 3d design • Graphic design • Community management • Open source • Technical support • Technical Writing • Figma • Pricacy & cybersecurity • Search Engine Optimization • Logo design
      </div>
      <div class="langs">
        HTML5 • CSS3 • JavaScript • Markdown • npm • Inkscape • Gimp • Figma • Git & GitHub & GitLab • SVG • PHP • Python • Wordpress • Mailchimp
  </div>
Enter fullscreen mode Exit fullscreen mode

Next comes the CSS:

.skills, .langs {
  text-transform:uppercase;
  font-size:4vw;
  display: inline-block;
  white-space: nowrap;
  animation: floatText 25s infinite linear;
  padding-left: 100%; /*Initial offset, which places the text off-screen*/
  color:#ada97d;
}
Enter fullscreen mode Exit fullscreen mode

From above, the most important declaration is padding-left: 100%, which places the text out of view.

Now, we need additional code to animate the scrolling motion of the text across the screen. We use the animation: floatText 25s infinite linear declaration. floatText calls the animation keyframes, which we'll soon add. The animation runs for 25s. You can edit this value to affect how fast or slow you want the text to move across the screen. We use infinite to ensure the text moves continuously.

Now, we make use of the translate property while writing the floatText keyframe:

@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}
Enter fullscreen mode Exit fullscreen mode

Recall that earlier, we had given the text an initial offset with padding-left: 100%. Now, we can scroll the text over to the right using the above code, which translates its position in an opposite direction to the initial offset.

That's it. You're done.

Well, not quite. You can decide to add one more nifty feature -- to make the text pause when the mouse cursor hovers on it. This pause could be helpful to slow readers, giving them time to read the text before it scrolls off the screen. To do this, give the animation-play-state property a value of paused.

.skills:hover, .langs:hover  {
  animation-play-state: paused;
}
Enter fullscreen mode Exit fullscreen mode

There you have it. A continuous horizontal pause-able text scroll, made with pure CSS :)

Top comments (2)

Collapse
 
santiag63197526 profile image
Franco Sánchez UI | UX Designer

How can you make the text below move to the left? Thank you

Some comments may only be visible to logged-in visitors. Sign in to view all comments.