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


SUMMARY GENERAL PHOTO TECHNICAL WEB DEV WORKSHOP     HOME
SUMMARY LINKS REFERENCE UTILITIES DESIGN CSS HTML JAVASCRIPT  
SUMMARY LINKS PAGES BACKGROUND MENUS FORMS FONTS ICONS  
SUMMARY IMAGES GRADIENT MOVING RANDOM SLIDER COLOUR I COLOUR II SELECTOR

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