A background image scroller in Javascript. The background of the image scrolls like a marquee. The direction of scrolling and the speed of scrolling can be set. More than one scrollers are prossible with different direction of scrolling and speed.
Examples are provided in the HTML file.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> Scrolling Background </title>
<script>
<!--
var DefScrollSpeed = 10;
var DefScrollDirection = 'horizontal'; // (horizontal, vertical)
function BGScroller(ID, SD, SS, BG)
{
Elem = GetElem(ID);
if(!Elem)
{
return false;
}
else
{
if(BG)
{
Elem.style.backgroundImage = 'url("' + BG + '")';
}
SS = SS ? SS : DefScrollSpeed;
SD = SD ? SD : DefScrollDirection;
BGScroll(ID, SD, SS, 0);
}
}
function BGScroll(ID, SD, SS, Pos)
{
Elem = GetElem(ID);
Elem.style.backgroundPosition = (SD == 'horizontal') ? Pos++ : '0 ' + Pos++;
window.setTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}
function BGScrollerInit()
{
// Creating background scroller
// Parameters are
// 1. Element Id
// 2. Scrolling Direction (horizontal, vertical)
// 3. Scrolling Delay (Smaller means faster)
// 4. Background Image
// Except (1) all other parameters are optional
BGScroller("Elem1", "vertical");
BGScroller("Elem2");
BGScroller("Elem3", "vertical");
BGScroller("Elem4", 'horizontal', 30, 'scrolling_horizontal.gif');
}
function GetElem(ID)
{
return document.all ? document.all[ID] : (document.getElementById(ID) ? document.getElementById(ID) : false);
}
//-->
</script>
<style type="text/css">
<!--
body{background:#F2F2F2;}
.tblScrolling{width:500px;height:500px;border:1px #C0C0C0 solid;font:bold 12px Arial;color:#333333;}
.tblScrolling td{vertical-align:middle;text-align:center;width:50%;height:50%;}
//-->
</style>
</head>
