Scroll text and fade from DIV-A to DIV-B using JavaScript

JavaScript ...
... makes things happen!

(Refresh the page to see the effect again, or click here - wait for it to finish first!)

Above are two absolutely positioned DIV blocks, B on top of A. Both DIVs have a background image set. DIV-B initially has opacity set at 0 (therefore is not visible yet). DIV-A contains another DIV (id="scrolltext") which holds the text we want to scroll - this is initially positioned out of sight, past the right edge. DIV-A has opacity set at 100% initially, so it is visible.

The text DIV (id="scrolltext") inside DIV-A is scrolled from right to left. Then DIV-A fades to DIV-B.

Lots of things are possible. For instance, you can start to fade from DIV-A to DIV-B before the text has finished scrolling (quite a nice effect) by simply reducing the delay before the 2nd part of the animation (currently 4000ms - 4 secs) - see the animBanner() function. [Try this - delay reduced to 2000ms]

You do have to be a little careful about starting the animation again (ie. calling the animBanner() function) before the animation has actually finished as otherwise it will mess it up - you'll have more than 1 animation going on at the same time! However, a bit of code could be added to prevent this, if this is a problem.

NB: I avoided using IEs filters as they are, afterall, IE only.