Many years ago scroll-text animations (or any type of CSS text animations) were everywhere on the internet. They were easy to set up with the now obsolete <marquee> tag… and people took full advantage of that.
Scrolling text may have started life as a fun and whimsical feature of web sites… but it soon became a cliched and bothersome characteristic of browsing! People turned against it in a big way. In fact, TechRepublic once described them as “a subject of intense hatred,” a “hideous creature,” and “a figure of derision.” Ouch! And that was back in 2007.
The court of public opinion had reached its verdict – scroll text animations were guilty, of crimes against user experience! The sentence? Exile! Banishment! Its HTML tags would be deprecated, and it would be thrown into the same pit that comic sans was tossed into, to be seen only on your Uncle Bob’s Geocities page that he forgot to take down.
But today, I want to reopen the case, and present new evidence. Court is now in session, all rise!
The case against scroll text animations
In order to defend scrolling text, we must understand the arguments against it, and develop countermeasures. The main complaints against it are:
- It’s annoying
- It pulls your attention away from other parts of the page
- It’s too damn slow! It takes aaaaaages for the text to come into the screen. You’re sat there banging your fists against the desk, waiting for the message, screaming “COME ON, DAMN YOU! YOU’RE SCROLLING TOO SLOW, BLASTED TEXT!” (Or that might just be me. Don’t worry, professional help is being sought.)
- It looks… old. Work out. Tired. Used.
So if we’re to avoid these pitfalls, we must follow these golden rules:
Use scrolling text very, very sparingly
Don’t overload your pages with scrolling text or your site will look like a MySpace page from 2004. Scrolling text is like chilli – a little bit can add flavour, but too much leaves a bad taste in the mouth. You might consider only activating the scrolling behaviour on mouseover.
Don’t use it near key content
Don’t use it when there’s something more important on the page you want to draw your visitor’s attention to, like a CTA, a key product benefit, or something like that. Use animation to draw attention where you want it – not away from where you want it.
There is an exception to this rule – when the key content is in a different medium – for example, audio or video. A prime example of this is the news on TV – they often show headlines scrolling across the bottom while the key news report is showing.
Don’t scroll key content
Avoid putting key content that you want the visitor to read in scrolling text. If you do this, you’re forcing them to read at a particular speed, instead of the speed they want. Taking control away from your visitors will only frustrate them.
Look, scrolling text works fine in the train station, where the display board only has a limited width but the train has 24 stops. But on a web site, you’ve got as much space as you need. Use it!
So what should you put in the scrolling text, then? Well, either make the text obvious/background/supplementary information, or enable them to control the scrolling in some way (e.g. via mousewheel)
Make it unique, fun, novel, or clever.
Basically, avoid scroll text animations on ordinary text, unless it’s for parody purposes, as in the A Few Good Men example above.
If you can satisfy these 4 conditions, scrolling text gives you a key advantage – no one else is doing it, so it could help you stand out from the crowd!
OK, we’ve got countermeasures ready for the prosecution’s arguments. Now it’s time to present the case for the defense.
So your honour, I present 7 scroll text animations for your web site, that, when used thoughtfully and in the right project, could work really well!
1. Scrolling radio text animation
Here’s a cool example from Tiffany Rayside, of using scrolling text as a novelty. Of course, scrolling text was around long before the internet, and it used to be done (and sometimes still is!) using a grid of light bulbs or LEDs. This animation simulates that effect nicely.
2. Scrolling single words
When you think of scroll-text animations, you probably think sentences, right? But why not just scroll a single word? Check out this example by Roël Couwenberg:
Note that this avoids the key problems with scrolling text. It doesn’t provide key content, and you get what it’s telling you right away. It’s also not too distracting, as it’s only one word that’s moving. It could be ideal on the landing page for a product, perhaps scrolling through 3-4 one-word unique selling points of the product, so the user gets some idea of how it can benefit them right away.
3. Scrolling letters individually
OK, so we’ve tried scrolling single words, let’s take it a step further!
This pen by Jhey has a number of cool and clever text effects that you might like to check out, but I’d like to draw your attention to the SLOTS example. Who said that the whole words need to be scrolled? You can scroll individual letters! This could work well on a gambling site, or in an article about gambling, perhaps.
With this animation, we don’t need to worry about point 3 above, because you can see the full word at all times. However, we do need to worry about points 1 and 2 – it could get annoying, and pull attention away from more important things. Strong case for only activating this one on mouseover.
4. Breaking news
As noted above, scrolling text animations do have a place when the key content of the site is not text – so video or audio. And the classic example of this is the “Breaking News” headlines you see on news channels. Here’s a pure CSS implementation of this by Nate Levine:
The default speed is a little fast for my tastes, but you can adjust the speed of the text scrolling with the animation property of the ticker-news and ticker-title classes. And you’ll probably want to remove the “5” logo or replace it with your own!
You could overlay this on a video to give additional information or commentary. But because it’s in HTML and CSS and not a part of the video itself, you can make it interactive – perhaps by adding links, or by making the text stop scrolling on hover.
5. Scrolling background text
All of the critiques against scrolling text apply when the text is in the foreground – when it’s a main element in the site’s design. Would moving it to the background solve the problems? Well, check out this pen by [https://codepen.io/Praefect](Frank Talora), and decide for yourself:
As with the previous example, the text you would use in this situation should not be key – it shouldn’t be anything your visitor needs to read. It could even be your brand name or tagline (e.g., Apple might put “Think Different” here. You’d only need to see “Think D” before you got the message).
6. Star Wars scrolling text animation
This one is so cool! Tim Pietrusky freaking loves Star Wars, but he couldn’t find a web version of that iconic crawling text from the original 1977 movie. So he made one, and here it is! He even included the music… ahh that opening chord hits you right in the nostalgia doesn’t it? (I understand it’s b flat major, if you’re wondering).
If you want to give your visitors a dose of Star Wars, this could be the way to go. But remember the golden rules. Be wary about putting critical text in here, and if you do want to do that, it’d be best to enable the user to control the speed of the text scrolling with their mouse.
Speaking of which…
7. Give the user control over the scrolling text animations
Perhaps the main reason that scrolling text is frustrating, is that it takes control away from us. But… if you give the reader that control back, most of the problems with scrolling text will disappear.
A superb example of this is a website called Inception Explained. As you scroll down, text scrolls in and out of view, explaining the complicated plot of Christopher Nolan’s hit movie. As you scroll back up, the previous text comes back into view. You have full control. It’s pretty awesome.
But how would you go about building something like this? Well the site is effectively a full page site, where each “level” that the characters go through in the movie is represented by a different full page on the site. The text that scrolls in and out of view appears when you scroll within each full page.
Something like this would be an ideal use case for fullPage.js. fullPage is a JS library that helps you build, well, full page sites! It gives you a ton of ways to smoothly transition from one page to the next, and there is even support for scrolling elements within pages, which you could use to create similar effects to the Inception site.
And if you use WordPress, React, or Vue, and you’re thinking “Will it work alongside my favourite tools?”, the answer is yes – seamlessly!
Have a look at some examples of what fullPage can do – how might you want to use these features in your own projects?
