Forum Moderators: open
I need, what I call, a wipe scroller - or banner, that can contain both text and images. What I mean is I would like the text to scroll in, then fade out and an image to fade in. I have scoured the web looking for such a script, but too much information overload. Can anyone help or guide me in the right direction? I imagine this would be a relatively simple script...but I can't do it myself. Thanks!
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scroll text and fade example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
/* CSS GOES HERE */
-->
</style><script language="JavaScript" type="text/javascript">
<!--
// JAVASCRIPT GOES HERE
//-->
</script></head>
<body><!-- HTML GOES HERE -->
</body>
</html>
Insert the code where the comments are. As you may notice from the HTML bit, you will also need an image called "bali.jpg" in an "img" sub directory. This is the image that fades in after the text has scrolled. The image is 350px by 150px, which is the same size as the DIV container (defined in the CSS part).
The CSS and JavaScript can be saved in separate files and linked in to keep your HTML page cleaner if you wish.
I'll PM you with a link to a test page.
