A friend sent me a link to a site that had an interesting feature – a scrolling page background. After looking at the HTML code, I found that it is being done with Javascript. Even better, this can easily be done in SiteSpinner.

The script is designed to scroll the background image by changing its left position by a set number of pixels at a set time interval. When the background image reaches its left edge, the direction of movement is reversed so the animation is continuous. To use the script, place the following code inside a code object and make sure the code placement is set to “in Body.”

<script type='text/javascript'>
  var speed = 100;
  var ver_pos = 'center';
  var num = wid = -500;
  var dir = 0;
  var bgOb = eval('document.body');
  function scrollBG() {
    if (dir == 1) {
      if ((++num) >= 0) dir = 0;
    }
    else if (dir == 0) {
      if ((--num) <= wid) dir = 1;
    }
    bgOb.style.backgroundPosition = num+'px '+ver_pos;
  }
  setInterval('scrollBG()',speed);
</script>

In the script, you can change the following variables:

The following figure illustrates how to determine the value of the variable num. The background image must be wide enough to have part of the image hidden off the left side of the page and part that is visible in the browser window. The width of the part that is off-page is the value to use for num and in order to shift it to the left (off the page), it must be a negative value. The script scrolls the hidden part into view, and when the left edge of the image is reached, the scrolling direction is reversed.

Background image selection is very important. The image must span the entire width of the browser with extra to allow it to scroll into view (as shown in the above figure). Because you do not know how wide your visitor’s browser will be, you must use an image larger than the width of today’s modern monitors. Unfortunately this could result in a very large image that may take a while to load in a browser. The example site uses a background JPG image that is 2456×668 pixels and is about 140K. A network monitor revealed it took 2.5 seconds to load in my browser.

SiteSpinner Object Background

As you know, you can add an image to a SiteSpinner object using the Shading Editor. You can use a modified form of the script to add a scrolling background to a rectangle shape, text, or code object. There are a few steps you must take to use a scrolling background with these objects.

1. A rectangle shape must have its Re-Render and Anti-Aliasing options disabled (Object Editor→Options tab). If this is not done, SiteSpinner will convert the shape and any background to a single image, effectively placing an image on your page and not an object with a background. SiteSpinner must convert other shapes (ovals and polygons) to images, so these are not suitable for using with a scrolling background as images cannot have backgrounds.
2. If using a rectangle shape, you must add the background image to the object as a Tile. Adding the background image using a Stretch or Scale type will cause SiteSpinner to render the shape as an image regardless of the Re-Render setting.
3. You need to make sure the object is sized large enough to display your background image. When using a text object, this means you may need to make the object larger than the text. If this is necessary, you should lock the object so it is not automatically re-sized by SiteSpinner if you edit the text.

To use a scrolling background with a SiteSpinner object, you will need to use the following modified script. Place the code in a code object with the code placement set to “Header.”

<script type='text/javascript'>
var objSpeed = 75;
var objVer = 'center';
var objNum = objWid = -300;
var objDir = 0;
var obBg; 

function scrollObjBG() {
  if (objDir == 1) {
    if ((++objNum) >= 0) objDir = 0;
  }
  else if (objDir == 0) {
    if ((--objNum) <= objWid) objDir = 1;
  }
  obBg.style.backgroundPosition = objNum+'px '+objVer;
}
function initScrollObjBG(obj) {
  obBg = document.getElementById('O'+obj);
  setInterval('scrollObjBG()',objSpeed);
}
</script>
<body onload="initScrollObjBG('objXX');" >

Change the objXX in the last line to the actual object name of your object. In this modified script, the variables objSpeed, objNum, and objVer have the same use as the variables speed, num, and ver_pos in the original scrolling background script. This allows both scripts to be used on the same page if desired.

In the demo page, you can see both scripts being used at once.