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>

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;
}

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%);
  }
}

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;
}

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

Comments

[Franco Sánchez UI | UX Designer]

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