Web Development - Moving Page Background - Neils Resource WebWeb Development - Moving Page Background - Neils Resource WebNEILS RESOURCE WEB - WEB DEV. - Design - Moving Background



Summary of Content

A nice bit of scripting, if you can put up with the effect! Check the settings at the foot of the page, for scrolling / speed variations.

the source

<body background="back.gif">
<script language="Javascript">
<!--

var background = "/~jsmaster/back.gif";
var speed = 0;

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

if (browserName != "Netscape" || browserVer >= 6) {

function moveback(movert,movedn,hPos,vPos) {
 
  if (arguments[4])
    document.body.style.backgroundImage = "url(\"" + arguments[4] + "\")";
 
  if (arguments[5])
    document.body.style.backgroundRepeat = arguments[5]
 
  if (!isNaN(hPos)) {
    if ((movert!=0) && (hPos>0)) hPos=-100000
    hPos += movert
  }
  if (!isNaN(vPos)) {
    if ((movedn!=0) && (vPos>0)) vPos=-100000
    vPos+= movedn
  }
 
  document.body.style.backgroundPosition= hPos + " " + vPos
  if (isNaN(hPos))  hPos = "\"" + hPos + "\""
  if (isNaN(vPos)) vPos = "\"" + vPos + "\""
setTimeout("moveback("+movert+","+movedn+","+hPos+","+vPos+")",speed)
}
 
moveback(1,1,0,0, background);
}

//-->
</script>
 

Color coding..
 

This is the URL of the background image you wish to animate. It is IMPERATIVE that you declare the URL of the image twice.
This is the speed at which the background moves.
This is the direction in which the background moves. The first "1" is the horizontal direction. A "1" moves the background right, a "-1" moves it left, and a "0" keeps it put. The second "1" is the vertical direction. A "1" moves the background down, a "-1" moves it up, and a "0" keeps it put.

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)

Back to TopBack to TopA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Updated24/12/2007 - Web Development - Moving Page Background - Neils Resource Web