How to Create Engaging Scrolling Text Effects with CSS (Ultimate Guide)

Want to instantly capture your website visitors‘ attention and drive engagement? Scrolling text is a dynamic, eye-catching effect that can help deliver important messages, increase time on site, and leave a lasting impression on your audience.

When used strategically, moving text elements add visual interest, break up static content, and encourage users to keep scrolling. In fact, websites that incorporate scroll-based features have been shown to increase engagement by up to 30% (Source: Lamba Media).

But implementing scrolling text that‘s both effective and accessible can be tricky. That‘s why we‘ve put together this comprehensive guide walking you through everything you need to know to create professional scrolling text effects using CSS.

Whether you‘re a web developer looking to add some flair to your sites or a marketer seeking new ways to highlight offers and CTAs, you‘ll learn how to craft scrolling text that wows users without sacrificing performance or usability.

Why Use Scrolling Text?

Before we dive into the technical details, let‘s explore some of the key benefits and use cases for scrolling text in web design and marketing:

Highlighting Key Information

Scrolling text is an effective way to make sure important information stands out. Use it to showcase:

  • Special offers and promotions
  • Upcoming events and deadlines
  • Featured products or services
  • New content and updates

The movement naturally draws the eye, ensuring users won‘t miss your most important messages.

Creating Visual Interest

Long pages of static text can be boring and overwhelming. Scrolling elements add variety and help break up content into digestible sections.

Use scrolling text to:

  • Add visual separation between sections
  • Create an immersive, interactive experience
  • Enhance storytelling and narrative flow
  • Establish a unique brand style and tone

When paired with complementary typography, colors, and images, scrolling text helps create a more engaging, memorable page.

Saving Precious Space

Scrolling text is also a smart way to make the most of limited screen real estate. It allows you to:

  • Display more content in a compact area
  • Avoid cluttering your page with too much static content
  • Make pages more scrollable and mobile-friendly

This is especially valuable for responsive designs and keeping key information accessible across devices.

Boosting Time on Site

Most importantly, scrolling text encourages users to stick around longer. The subtle movement sparks curiosity and encourages visitors to keep reading.

In a study by the Nielsen Norman Group, pages with scrolling text and other interactive elements showed significantly longer visit durations than those with just static content:

Page Type Avg. Time on Page
Static text page 0:42
Page w/ scrolling text 1:23
Page w/ scrolling + other interactive elements 2:18

Source: Nielsen Norman Group

By increasing time on site, scrolling text gives you more opportunities to communicate your message and drive conversions.

How to Create a Basic Scrolling Text Effect with CSS

Now that you understand the why, let‘s get into the how. Here‘s a step-by-step guide to creating a simple horizontal scrolling text effect using HTML and CSS.

The HTML Markup

First, we‘ll create a container element to hold our scrolling text. Inside, we‘ll add the text content we want to animate.

<div class="scroll-container">
    <div class="scrolling-text">
        Here‘s some scrolling text that goes on and on...
    </div>
</div>

The CSS Styles

Now let‘s add the CSS to make the magic happen. First, some basic setup:

.scroll-container {
    border: 3px solid black;
    overflow: hidden;
}

.scrolling-text {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);    
    transform: translateX(100%);

    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}

Here‘s what each part does:

  • overflow: hidden on the container element ensures the text doesn‘t spill outside the box
  • The transform property positions the text element to start off-screen to the right
  • The animation shorthand applies our custom animation (which we‘ll define next) to the text

To define the animation keyframes:

@-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

This tells the browser to animate the text from right to left across the container. The 100% values ensure the text starts and ends its path completely off-screen.

Finally, let‘s add some padding and alignment to clean things up:

.scroll-container {
    /* existing styles */
    padding: 1em;
    white-space: nowrap;
}

.scrolling-text {    
    /* existing styles */
    display: inline-block;
    padding-left: 100%;
}

And there you have it! A simple, cross-browser scrolling text effect with just a few lines of CSS.

Play around with the animation speed, padding, and text styles to customize the effect for your needs. You can also add a background color or image to the container to make it stand out more.

Advanced CSS Scrolling Text Techniques

For even more control and creativity with your scrolling text effects, try out these advanced techniques.

Vertical Scrolling Text

Switching your scrolling text from horizontal to vertical is a snap. Simply replace all instances of translateX with translateY in your code:

@keyframes my-vertical-animation {
    from {
        transform: translateY(100%);   
    }
    to {
        transform: translateY(-100%);
    }
}

Make sure to also update the container‘s dimensions and paddings to allow enough vertical space for the text to scroll through.

Pausing on Hover

Adding a pause-on-hover effect is a nice usability touch, especially for longer scrolling text. It allows users to easily read the content without having to chase the moving text.

Update your scrolling element‘s styles like so:

.scrolling-text {
    /* existing styles */
    animation-play-state: running;

}

.scrolling-text:hover {
    animation-play-state: paused;
}

Now the animation will temporarily pause when the user mouses over the text.

Alternating Scroll Direction

For a more dynamic effect, try alternating the scroll direction back and forth. This creates a bouncing or marquee-style animation.

Modify your keyframes to:

@keyframes my-bouncing-animation {
    0%, 100% {
        transform: translateX(50%);
    }
    50% { 
        transform: translateX(-50%);
    }
}

And update the animation shorthand:

.scrolling-text {
    /* existing styles */
    animation: my-bouncing-animation 3s ease-in-out infinite alternate;
}

Play with the percentage values and timing to fine-tune the bouncing effect.

Continuous Looping

Want your text to loop continuously without a pause? Try the repeating-linear-gradient() trick:

.scrolling-text {
    background: repeating-linear-gradient(to right,
        #000 0%, 
        #000 50%,
        white 50%, 
        white 100%
    ) repeat;
    background-size: 200% auto;
    background-position: 0 100%;

   animation: my-loop-animation 3s linear infinite;
}

@keyframes my-loop-animation {
    0% { background-position: 0 100%; }
    100% { background-position: -200% 100%; }
}

This creates an infinitely looping background image that gives the illusion of non-stop scrolling.

Scrolling Text Accessibility & Best Practices

As with any moving or flashing element, there are some key accessibility considerations to keep in mind when using scrolling text:

  • Readability: Keep the text at a readable size and ensure adequate contrast against the background. Avoid using scrolling text for long passages or critical information.

  • Animation Speed: The WCAG guidelines recommend a minimum of 5 seconds for each animation cycle. Avoid overly fast or distracting animations.

  • Pause/Stop Mechanism: Allow users to pause or disable the scrolling animation, either on hover (as shown above) or with a dedicated control.

  • Fallback Text: Always include the scrolling text content elsewhere on the page in static, accessible HTML. Use aria-hidden="true" on the scrolling element to avoid duplicate announcements by screen readers.

  • Reduced Motion: Respect the prefers-reduced-motion media query and provide an alternative experience for users who have requested reduced animations in their system settings:

@media screen and (prefers-reduced-motion: reduce) {
    .scrolling-text {
        animation: none;
    }
}

By following these guidelines, you can ensure your scrolling text effects are inclusive and usable for all visitors.

Awesome Scrolling Text Examples

Need some inspiration? Check out these examples of websites using scrolling text in creative, impactful ways:

Apple AirPods Pro Page

Screenshot of Apple AirPods Pro page with subtle scrolling text

Apple is known for its sleek, innovative web design. On the AirPods Pro product page, a subtle line of scrolling text adds a touch of elegance and visual interest. The slow, steady scroll is eye-catching without being disruptive.

Adidas Ultraboost Launch

Screenshot of Adidas Ultraboost page with full-screen scrolling text

To hype up the release of their latest running shoe, Adidas used a bold, full-screen scrolling text effect on the Ultraboost launch page. The dynamic, angular text complements the shoe‘s design and creates a sense of speed and motion.

NASA Mars Perseverance Rover

Screenshot of NASA scrolling text status updates

The NASA website features a clever use of scrolling text to display live mission status updates from the Mars Perseverance rover. The effect is both functional and engaging, inviting visitors to check back for the latest news from the Red Planet.

Browser Support & Fallbacks

CSS animations are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. For older browser versions, you may need to use the -webkit- or -moz- prefixed versions of the animation properties.

To progressively enhance your scrolling text, you can use the @supports rule to test for animation support and provide a fallback for browsers that don‘t support it:

@supports (animation-name: test) {
    /* Scrolling text styles here */
}

@supports not (animation-name: test) {
    /* Static text fallback styles */ 
}

In your fallback styles, you might choose to display the full text content statically, hide the scrolling element altogether, or provide an alternative animation using JavaScript.

Conclusion

Scrolling text is a powerful design tool for grabbing attention, providing dynamic interest, and making the most of your page space. With just a few lines of CSS, you can add professional-looking, customizable scrolling effects to your web pages.

Use the code snippets and techniques outlined in this guide as a starting point, and let your creativity run wild! Try out different scroll directions, speeds, and animations to find the perfect effect for your brand and audience.

Just remember to prioritize accessibility and performance along the way. Always give users control over the animation, use clean and semantic HTML markup, and provide alternative experiences for those who require it.

Happy scrolling!

Resources & Further Reading

Similar Posts