You may make your website more engaging for visitors by learning how to implement scrolling text using CSS. What’s even better? CSS text scrolling is easier to learn than it looks at first glance. You may utilize your newfound scrolling text skills to design a news ticker, a movie’s closing credits, or even transport your audience to a galaxy far, far away.
If you want to attract new users to your website, it’s essential to keep it straightforward and content-focused most of the time. This tutorial will show you how to make a scrolling text animation using the CSS and HTML formats. We’ve also included four code snippets you may use as a starting point for your own scrolling text.
Scrolling Text in CSS
We’ll use the transform: translateX and transform: translateY attributes in conjunction with some CSS animations to make the text move. We’ll also add vendor prefixes for Safari and Chrome (-webkit-) and Firefox (-moz-) to our animation rules to guarantee support for all major browsers. Are you prepared to begin making your own CSS-style scrolling text animation? We’ll begin with text written from right to left.
Also Read – Sales Velocity: What It Is & How to Measure It
CSS Horizontal Scrolling Text: Right-to-Left
Putting text within a div labeled scroll-text will cause it to scroll from right to left. The scroll-container div will be used to move this element inside of it.
Modifying the CSS will allow you to get the scrolling effect you want for the text. Changing the seconds value of the animation property from the default of 10s will cause the scrolling speed to adapt accordingly. The scrolling effect may be sped up by setting this number lower, and slowed down by setting it higher.
The width of the div also has an effect on how quickly the text scrolls: the more space there is, the faster the scrolling will be. When the browser window is adjusted, the text rate adapts accordingly. The issue may be fixed by specifying a fixed width in pixels for the scroll container.
CSS Horizontal Scrolling Text: Left-to-Right
Swap the positive and negative translateX values to have the text scroll from left to right. Every occurrence of 100% will be changed to -100%, and every occurrence of -100% will be changed to 100%. The text inside scroll-text has likewise been aligned to the right by me. The animation will begin with the text already in place.
CSS Vertical Scrolling Text: Bottom-to-Top
Substitute translateY for translateX whenever you see it to make the text scroll vertically. In addition, I have centered the text, shortened the animation time to 5 seconds, and set a height for the div container. The effect is a more pronounced vertical scroll.
CSS Vertical Scrolling Text: Top-to-Bottom
To switch the direction of the vertical scroll, we simply to swap the sign of our translateY variable from positive to negative, like we did when changing the direction of the horizontal scroll.
Also Read – What Is Annual Contract Value (ACV) And How Should You Use It?
Scrolling Text in JavaScript
Now that you know the fundamentals of making scrolling text, we can move on to the more advanced techniques. JavaScript may be needed to create a marquee effect for the more dynamic scrolling text components. A few instances of this type of use of JavaScript are provided.
In the first, we see how JavaScript (in this case, jQuery) can be used to turn a list of objects into a revolving ticker animation. The best part about this solution is that you may increase the number of bullet points in the list without modifying the script.
Here’s how to leverage the user’s scrolling motion to activate side-scrolling text. In an effort to boost user participation, this is becoming increasingly frequent on websites.
Cases of Scrolling Text
Curious as to what real-world examples of animated text scrolling may look like? Seeing a simple demo is one thing, but experiencing it firsthand is something else different. We’ve collected some of our favorite examples of scrolling text to give you an idea of what your own site’s implementation may look like.
Digital of Things
Digital of Things, a company that specializes in user experience, uses scrolling text on their site. This creates a stunning marquee effect across the entire page. It’s simple yet effective, and the pace of the writing is gradual so as not to overwhelm the reader.
Restore Hope Appeal
The scrolling text on this disaster assistance organization’s website is less obtrusive. The designers have opted to place the scrolling text towards the bottom of the screen in order to keep the emphasis on the photographs and articles at the top.
Since its size makes it challenging to read at higher rates, this text is likewise sluggish. Keep in mind that while the aesthetics of the scrolling text are certainly something to think about, the needs of the user should always come first.
Squadeasy
The 404 page on Squadeasy does a good job of explaining that it is a 404 page by using screen-wide scrolling text. The floating puppy head in the middle helps to keep things light, which is why we like it.
Andrew Leguay
Last but not least, you can check out Andrew Leguay’s portfolio here. Scrolling text on the site effectively displays the designer’s partnerships with other businesses. The minor slant of this scrolling text adds to the visual appeal of the feature.
Also Read – What Is Bandwagon Advertising? Example, Advantage And More
Marquee Element with HTML5 Scrolling Text
The marquee> element in HTML may be used to generate a scrolling text effect without any additional scripting or style sheets. This element will automatically create a scrolling text area on the page. Then, you may adjust its performance using a number of parameters:
although, (and there is a huge “however”) the marquee element has been deprecated in HTML5 and should not be used. The above should function well in your browser. There is, however, a possibility that they won’t in the future. If you adhere to the CSS approach for scrolling text animation that we detailed above, you won’t run into any problems because it follows the latest CSS3 specifications.