Below are two absolutely positioned DIV blocks, B on top of A. B contains an image and initially has opacity set at 0. A contains another div, containing text only (positioned out of site), and has opacity set at 100%.

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

Error checking has been removed for clarity.

JavaScript ...
... makes things happen!








See other test page


WebmasterWorld.com JavaScript Forum:
http://www.webmasterworld.com/javascript/3060882.htm

Hi kslnor, I don't know flash either, but it's certainly possible with JavaScript (maybe not quite so smooth, but hey)... in fact, I've had a bit of a play and it works ok (in both IE6 and Firefox)... This uses two DIVs (A and B). Both DIVs are the same size and positioned absolutely on top of each other. DIV A contains another DIV (the scrolly text) and is initially set with opacity 100% (visible), although the text itself is positioned outside of the parent DIV (not visible). DIV B contains an image and initially has opacity 0 (not visible).

The animation is in two parts:

  1. The text scrolls within DIV A (right to left)
  2. DIV A then fades to DIV B

The HTML:

<div id="block_A" class="myblock"> <div id="scrolltext">Hello, this is the scrolling text in block A</div> </div> <div id="block_B" class="myblock"> <img src="img/bali.jpg" width="350" height="150" alt="Bali photo"> </div>

The CSS:

div.myblock { position:absolute; top:180px; left:100px; width:350px; height:150px; overflow:hidden; } div#block_A { background-color:#ccc; opacity:1; filter:alpha(opacity=100); /* IE */ } #scrolltext { position:relative; left:350px; top:50px; font-size:2em; font-weight:bold; white-space:pre; /* prevent word-wrap */ } div#block_B { background-color:#faa; opacity:0; filter:alpha(opacity=0); /* IE */ }

The JavaScript:

window.onload = animBanner; function animBanner() { // Part 1 - Scroll text in Div A // (Should take 3500ms) scrollText(); // Part 2 - Fade from Div A to Div B (image) after 4000ms // (Enough time for part 1 to finish) setTimeout('fadeAToB()',4000); } // Part 1 function scrollText() { var i = 0; // Box is 350px wide - so text is initially out of sight // Scrolls right to left (x value - 350 down to 0) // NB: Should finish in 350 * 10 = 3500ms for (var xpos=350; xpos>=0; xpos--) { i++; setTimeout('posText(' + xpos + ')',i*10); } } // Part 2 function fadeAToB() { for (var i=0; i<11; i++) { setTimeout('setOpacity('+i+')',i*100); } } // Positions text at xpos function posText(xpos) { var txtobj = document.getElementById('scrolltext'); txtobj.style.left = xpos + 'px'; } // Sets opacity of B (and inversely of A) - value is 0..10 function setOpacity(value) { var blockA = document.getElementById('block_A'); var blockB = document.getElementById('block_B'); blockB.style.opacity = value/10; blockB.style.filter = 'alpha(opacity=' + value*10 + ')'; value = 10-value; blockA.style.opacity = value/10; blockA.style.filter = 'alpha(opacity=' + value*10 + ')'; }

The function animBanner() is what kicks things off. Here I've attached it to the onload event, so it starts as soon as the page is loaded, but it can be attached to anything.

Also note that the defined area for the animation is 350px by 150px as defined in the .myblock class. If you change the width, then you need to also change where the text is positioned initially, in both the #scrolltext CSS and the scrollText() function.

I've taken out some of the error checking (testing if DIVs exist etc.) - but this may help you get it working!

Hope that helps.

[Home]