A short time ago in a browser very, very close…

Reinhard Langepresents WEBDESIGN


It is a period of vendor war.

This is a demonstration of scrolling titles in your browser. It possibly has no practical purpose whatsoever but it looks great and you can impress your friends and customers.

Before movie-buffs start ranting, I realize that I was'nt the first to use crawling titles, but few of you will remember the Flash Gordon series or the 1936 adaption of HG Wells "Things to Come".

Also, by mentioning the movies, everyone will understand what I mean. And I will receive several thousand more visits and much more money as you.

The scrolling titles work well in Chrome (best view), Safari and Firefox. Opera doesn't implement transforms yet, but the text will scroll. IE users receive a blank page. A shame, but IE10 should support it.

So how does it work? Well, it's fairly simple. We have an outer absolute title which is rotated along the X-axis using perspective to give the impression of depth. The same title also has an psuedo-element which applies a linear gradient so the text appears to fade out.

Inside, we have another absolutely-positioned title which contains the text. The top is set to ensure it starts off-screen then uses animation to move it upward over time. No JavaScript is required.

You will probably need to adjust the movement amount and timing depending on the quantity of text you want to show. The depth can also be tweaked in the titles declaration.

All the code is handmade…

Don't view the source, Luke!

Sorry. Couldn't resist it.


and give me a shout on Twitter @beratungscenter – I'd love to see how you use and abuse it!

Finally, Han shot first and the original, unadulterated movies remain the best. Stop fiddling with them, George!