Animating Background Images with Javascript

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

Coding and design don't always go hand in hand, designers aren't coders and coders in many cases lack design flare. Javascript started it's life in the realm of the coder and was used to perform calculations (this was the first javascript I wrote when learning about developing for the internet at university) but with all the script libraries emerging people have been able to find more ingenious things to do with javascript.

Javascript allows us to move DOM objects around the page, we are still going to use a little maths, but we are going to this maths to move an objects positions on a page. Our example is the stars in the background of this page. All other pages of this site the stars are static, on this page the stars should be moving across the screen if you have javascript enabled in your browser. So now we have seen the results lets have a look at how we have implemented this simple animation using DOM object properties and javascript functions.

The code:

var skyspace=new Array; skyspace[‘dir’]=-1; skyspace[‘place’]=0;

function $(id) {
  return document.getElementById(id);
}

function init() {
  window.int_rollnightsky=setInterval("rollnightsky();",100);
}

function rollnightsky() {
  skyspace['place']+=skyspace['dir'];
  $('article').style.backgroundPosition=skyspace['place']+'px 0';
  if(skyspace['place']<-400) {skyspace['place']+=400;}
  skyspace['place']%=400;
  if(Math.random()>.998) {skyspace['dir']*=-1;}
}

The above code should ideally be placed in an external .js file or in the head of your document in between script tags as it has been here to you can easily view the code in the source for yourself. We also need to add the following line in the body of our document, placing it before we close the body tag will mean the rest of the page has loaded before we start to execute the script.

<script type=text/javascript>init();</script>

Now lets have a look at the code in some more detail.

var skyspace=new Array; skyspace[‘dir’]=-1; skyspace[‘place’]=0;

What we are doing here is first creating a new array and setting some default values.

function $(id) {
  return document.getElementById(id);
}

Our first function will allow us to essentially manipulate a given HTML element selected by its identifier. Remember any HTML element must have a unique ID.

function init() {
  window.int_rollnightsky=setInterval("rollnightsky();",100);
}

This is where we tell the script to start doing its thing as well as setting an interval in milliseconds.

function rollnightsky() {
  skyspace['place']+=skyspace['dir'];
  $('article').style.backgroundPosition=skyspace['place']+'px 0';
  if(skyspace['place']<-400) {skyspace['place']+=400;}
  skyspace['place']%=400;
  if(Math.random()>.998) {skyspace['dir']*=-1;}
}

And finally we get to the maths, we create our function rollingnightsky. In the third line you should replace “divID” with the ID of your own div or other element that has a background applied via CSS.

You don't have to limit yourself to stars, be creative.

This article was posted on 27 March 2009 in Code, Tutorials

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.