Use jQuery to add scrolling text in the address bar

23 comments

I saw this post on Search Engine Land yesterday about how a German car website had used Javascript to animate their URL so it looked like a car was driving from left to right in the address bar. I thought this was pretty cool and I was bored this morning so I reproduced it using jQuery. See the results here.

Here is how it’s done.

1. Download the latest version of jQuery, the jQuery Timers plugin, and my animate.js file.

2. Include those files in the <head> section of your document

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.timers-1.0.0.js"></script>
<script type="text/javascript" src="animate.js"></script>

3. Change the settings in animate.js to scroll the text that you want

Note: This was just a fun little experiment to learn a bit more jQuery, I don’t actually think it should be used... ever. It’s very distracting to the user, and has some pretty big usability issues. The back/forward functionality is ruined because it just goes back to the last animated character and the URL can no longer be selected and copied because it is changing so quickly. On top of that, IE makes that ‘clicking’ sound each time it changes as if you clicked another link.

Thanks to Kevin van Zonneveld for the Javascript equivalent of PHP’s str_pad.