Mr Speaker

Things were getting way too popular around here, so it's time we took it down a notch: Welcome to Tacky DHTML web tricks #2! Following on from the highly impressive poppy images - comes an even more annoying and useless DHTML effect: the Angle Scroller! Yes... as if it were not hard enough to read stupid ticker style scrollers - now you have to do it on a 45 degree angle!

You can enter your own message and be amazed on the mrspeaker.net site (I'm in the process of integrating 'd-i-y messages' here) Oooh yeah! Angle Scroller! The "trick" to this c-razy effect is the character set I spent oh-so-long on designing. Using a grid of squares, I just drew the letters in each square how i figured they'd look rotated 45 degrees. I actually tried to rotate some letters 45 degrees in photoshop, but they just looked dumb. Even dumber than the ones you see now.

The characters are then cut up using the CSS sprites method (that I also talk about in the Air Sea Battle DHTML game post). Each character is set as the background of a letter-sized div. The div is placed at the bottom-right of the scroll area. Every loop, the letter is moved up and left 2 pixels. When the character has moved to the top of the screen it is removed, and placed back at the bottom with the next letter set as the new background image.

I did another version, but using a curve. It looked even more annoying that this. So, grab the angle-scroller script, draw some dodgy character sets, and annoy your visitors today!