Dynamic CSS animation
Last month I introduced the concept of 'film-strip' rollovers and promised to show some more examples this time.
var button = document.getElementById("b"+n);
The background image uses my Media 22 font and is set to repeat in the x axis – background-repeat: repeat-x; – so it goes on forever. To get it to move, all we have to do is set up a loop that moves the x position to the left by a few pixels at regular intervals like this...
running = 0;
running = setTimeout("run()", speed);
var thebox = document.getElementById("sign");
Getting the image to scroll smoothy is just a matter of adjusting the balance between the step distance x and the time delay speed. If the steps are too large, the animation will jerk, if they are too small, the movement will be too slow.
In many years of producing multimedia titles, I often had to simulate 'real world' hardware such as video tape decks. Making a rotary control knob or jog-shuttle dial is no mean feat but with film-strip animation, and a bit of image-map jiggery-pokery, you can get a reasonable effect.
I am currently writing a couple of programs to do all the math and automate the generation of multimedia navigation controls. More details here if you are interested.
I should also reiterate that while these techniques work fine in modern browsers, you should consider alternatives styles or pages for those still using legacy browsers on older computers.