You see many websites bombarded with flash, which is fine for complex animations and video, but what about a good old fashioned approach to animate your site without flash. When redesigning our website, we wanted to have some images that would scroll, but also function as a hyper-link to a page the image was advertising. My attempt to avoid reinventing the wheel led me to several hours of searching the interweb on how to do this using JavaScript. True there were many code examples where people we doing just this with JavaScript, but they were all complex and not very scalable. After about an hour of coding, I came up with a simple, scalable solution that met our needs perfectly.
This JavaScript is very re-useable, in that multiple pages, or multiple scrolling images can use this same code without any modification:
The JavaScript
var unit = “px”; //the unit of measure when moving each image up
var keepScrolling = true; //default to true so the images continue to scroll
var moveAmount = 2; //number of units to move each picture
/*
The main function that sets up the images
*/
function scrollImages(groupID, imageHeight, scrollDelay, imageDelay){
/*
Each image lives in its own div with a common id and numerical suffix (ex: pic1, pic2, ect.)
*/
var counter = 1;
var images = new Array();
//if the element exists, add it to the array
while(document.getElementById(groupID + counter) != null){
images[counter - 1] = document.getElementById(groupID + counter);
counter++;
}
//the first image should be at the very top
images[0].style.top = 0 + unit;
images[0].style.display = “block”;
//place the rest of the images directly under the first image
for(counter = 1; counter < images.length; counter++){
images[counter].style.top = imageHeight + unit;
images[counter].style.display = “block”;
}
setTimeout(function(){scroll(images, 0, imageHeight, scrollDelay, imageDelay)}, imageDelay);
}
//this funciton actually does the scrolling
function scroll(images, firstImage, imageHeight, scrollDelay, imageDelay){
var image1 = images[firstImage];
var secondImage = 0;
var thirdImage = 0; //if you only have 2 images, then the third image will always be the first
var image2 = null;
//because this function is called repeadily, the first image is not always the first image in teh array
//so the second image is simply the next image after the curent one being displayed
if(firstImage + 1 < images.length){
secondImage = firstImage + 1;
}
image2 = images[secondImage];
//scroll each image up the number of units
if(keepScrolling){
image1.style.top = (image1.style.top.replace(unit,”") – moveAmount) + unit;
image2.style.top = (image2.style.top.replace(unit,”") – moveAmount) + unit;
}
//if the second image isn’t at the very top yet, keep scrolling.
if(image2.style.top != “0px” && image2.style.top.indexOf(“-”) < 0){
setTimeout(function(){scroll(images, firstImage, imageHeight, scrollDelay, imageDelay)}, scrollDelay);
}
//if the second image is at the very top, get the next image and scroll
if(image2.style.top == “0px” || image2.style.top.indexOf(“-”) > -1){
if(secondImage + 1 < images.length){
thirdImage = secondImage + 1;
}
image1 = images[thirdImage];
image1.style.top = (image2.style.top.replace(unit,”") + imageHeight) + unit;
setTimeout(function(){scroll(images, secondImage, imageHeight, scrollDelay, imageDelay)}, imageDelay);
}
}
// the div that contains the image divs calls these funcitons on mouseover(pause) and mouseout(unPause)
function pause(){
keepScrolling = false;
}
function unPause(){
keepScrolling = true;
}
The CSS:
/*the main div that contains each images div*/
.flash {
background-image: url(“../images/flashspacer.png”);
clear: both;
position: relative;
width: 980px;
height: 240px;
overflow: hidden; /*this is very important because it keeps the images that are outside the div hidden*/
}
/*each image div uses this css class*/
.hero-image {
padding-left: 19px;
clear: both;
position: absolute;
width: 942px;
display: none;
top: 0px;
}
The HTML:
<div class=’flash’ onmouseover=’pause()’ onmouseout=’unPause()’>
<div id=”hero-image1″>
<a href=’page1.html’><img src=’img1.png’></a>
</div>
<div id=”hero-image2″>
<a href=’page2.html’><img src=’img2.png’></a>
</div>
<div id=”hero-image3″>
<a href=’page3.html’ ><img src=’img3.png’></a>
</div>
<div id=”hero-image4″>
<a href=’page4.html’><img src=’img4.png’></a>
</div>
</div>
If you want to add another image to the mix, all you need to do is add another image div and increment the numerical suffix by 1.