Pure CSS Continuous Horizontal Text Scroll
Tags: webdev, css, portfolio, html
Published: 2021-01-10 18:38:57

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](https://personal-website-nkadw.ondigitalocean.app/#about). 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](https://jsfiddle.net/octxm0p4/). 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 :)