How to Create Scrolling Text With CSS

Scrolling text can add dynamic and eye-catching elements to your website, drawing attention to important messages, announcements, or showcasing engaging content. Using CSS (Cascading Style Sheets), you can easily create scrolling text effects without relying on JavaScript or other complex scripting languages. In this article, we'll walk you through the step-by-step process of creating scrolling text with CSS.

1. HTML Markup

Before we dive into the CSS, let's set up the HTML structure for our scrolling text. For this tutorial, we'll create a simple example with a container div that holds the scrolling text.

html
<!DOCTYPE html> <html> <head> <title>Scrolling Text With CSS</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="scrolling-text-container"> <p class="scrolling-text">Your scrolling text goes here...</p> </div> </body> </html>

2. CSS Styling

Next, we'll write the CSS to make the text scroll horizontally or vertically, depending on your preference. We'll use CSS animations and keyframes to achieve this effect.

Horizontal Scrolling Text

css
/* styles.css */ body { /* Optional: Set a background color or image */ background-color: #f5f5f5; } .scrolling-text-container { /* Set the width and height of the container */ width: 100%; height: 50px; /* Adjust the height as needed */ /* Optional: Add some padding and margin */ padding: 10px; margin-top: 20px; /* Set overflow to hidden to hide the overflowing text */ overflow: hidden; } .scrolling-text { /* Set the initial position of the text */ position: relative; left: 0; /* Set the animation properties */ animation: scroll-horizontal 10s linear infinite; } /* Define the animation keyframes */ @keyframes scroll-horizontal { 0% { left: 100%; /* Start off-screen from the right */ } 100% { left: -100%; /* Scroll to the left */ } }

Vertical Scrolling Text

css
/* styles.css */ body { /* Optional: Set a background color or image */ background-color: #f5f5f5; } .scrolling-text-container { /* Set the width and height of the container */ width: 200px; /* Adjust the width as needed */ height: 100px; /* Adjust the height as needed */ /* Optional: Add some padding and margin */ padding: 10px; margin-top: 20px; /* Set overflow to hidden to hide the overflowing text */ overflow: hidden; } .scrolling-text { /* Set the initial position of the text */ position: relative; top: 0; /* Set the animation properties */ animation: scroll-vertical 10s linear infinite; } /* Define the animation keyframes */ @keyframes scroll-vertical { 0% { top: 100%; /* Start off-screen from the bottom */ } 100% { top: -100%; /* Scroll to the top */ } }

3. Adjusting the Scrolling Speed

In the above examples, we have set the animation duration to 10s, which means the text will take 10 seconds to scroll from one end to the other. You can adjust this value to make the scrolling faster or slower, depending on your preference.

4. Customizing the Scrolling Text

Feel free to customize the styles of the .scrolling-text-container and .scrolling-text classes to match your website's design. You can change the font size, color, background, and other properties to make the scrolling text blend seamlessly with your site's aesthetics.

5. Conclusion

Creating scrolling text with CSS is a simple and effective way to add visual interest and highlight important information on your website. By utilizing CSS animations and keyframes, you can easily achieve horizontal or vertical scrolling effects without the need for JavaScript or complicated scripts. Experiment with different styles and durations to find the perfect scrolling text effect that suits your website's needs. Happy coding!