CSS Infinite Scrolling Text

Infinite scrolling text is an excellent way to increase the visual appeal and display information on your website. It is a great way to highlight important announcements, promote products or services, or keep users engaged on your site for longer by adding interactivity to your design. This tutorial guides you on creating infinite scrolling text using only HTML and CSS.

Infinite Scrolling Text Using CSS - Interactive Demo

Step 1: Create the HTML

The first step is to create the HTML for your infinite scrolling text. Here's an example:

<div class="scrolling-text-container">
    <div class="scrolling-text-inner" style="--marquee-speed: 20s; --direction:scroll-left" role="marquee">
        <div class="scrolling-text">
            <div class="scrolling-text-item">Your First Announcement</div>
            <div class="scrolling-text-item">Your Second Announcement</div>
            <!-- Add More Items Here -->
        </div>
    </div>
</div>

Step 2: Add CSS for Styling and Animation

Use the following CSS code either within a <style> tag in your HTML file or in a separate CSS file:

/* Container styles */
.scrolling-text-container {
    background-color: #eff5ff;
    border-radius: 4px;
    overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

Step 3: Save and Test

Save the HTML and CSS file, then open it in a web browser to see scrolling text. Text scrolls to the left by default and stops on hover.

Step 4: Customizing the Scroll

To customize the scrolling direction or speed, adjust the --marquee-speed and --direction inline styles in the HTML markup:

• For speed: Change --marquee-speed: 20s to your desired time.
• For direction: Change --direction:scroll-left to scroll-right to scroll to the right.

Step 5: Advanced Customization (Optional)

To pause the scrolling when users hover over the text, the CSS uses the animation-play-state: paused; rule. If you wish to turn off this feature, simply remove the .scrolling-text-container:hover .scrolling-text-inner > div block from your CSS.

Conclusion

Creating infinite scrolling text using only HTML and CSS is simple and effective. Following the steps in this tutorial, you can easily create scrolling text in minutes.