Adjustable Animated Background

A free animated background effect with a wide range of uses and up to 10 different adjustments to suit almost any on page effect you want

View the effect on a web page by clicking on Animated Background Demo which will appear in a new window.

Of course, the animated background to the demo web page, seen by clicking on the link above, is not the only way to produce this type of effect and you'll find that they come in many forms.

One source I uncovered has 1000's of Video Animated Backgrounds, Tiled backgrounds and 3D Animations with new ones added every week. These are quality animations, but you can decide for yourself by clicking on the image below.

These include background animated gif images, java applets, DHTML effects, javascript animation, 3D and Video.

There are also entire web page transition effects, more on which you can find at Animation Backgrounds

Many of today's animated background effects rely upon java applets or java scripts that can produce rippling water, falling snow effects, rain and almost anything else, including the effect on this page.

The animation background effect you get is not just the one you see by clicking on the animated background demo link above.

The effect depends on the 3 images you use and the 7 other variables that you can adjust.

The code to make your own animated background is shown in the box below. You should copy and paste this code into your webpage between the html body tags of your page.

You should only edit code in the section marked. You can change the number of animated background images ( elements ) that appear on the page, the speed at which they move, how they slide from side to side, the fall rate and the strength of the cross wind.

You should change image1, image2 and image3 to the names and locations of your own images. The size of each image can be altered using the two numbers that appear after each image in the javascript code. The first number is the image width the second the height.

<script type="text/javascript" language="JavaScript"> var element_info = new Array(); ///////////// Only Edit these lines //////////////// var num_elements=13, speed=50, slider=30, fallmax=8, wind=2; element_info[0]=new Array("image1.gif",40,40,0); element_info[1]=new Array("image2.gif",40,40,0); element_info[2]=new Array("image3.gif",40,40,0); ////////////////////////////////////////////////////////////////// var css_img_style = " style='border: 0px; background-color: transparent;' "; var css_layerdiv = " style='background-color: transparent;' "; var o=new Array(), stopfall=1; var ns4 = (document.layers)? true : false; var ie4 = (document.all)? true : false; var ns6 = (document.getElementById&&!document.all)? true : false; if(ie4) falllayer = "document.all['gf'+i].style"; if(ns4) falllayer = "document.layers['gf'+i]"; if(ns6) falllayer = "document.getElementById('gf'+i).style"; function winWid() { return (ns4||ns6) ? window.innerWidth : document.body.clientWidth; } function winHei() { return (ns4||ns6) ? window.innerHeight : document.body.clientHeight; } function winOfy(){ return (ns4||ns6) ? window.pageYOffset : document.body.scrollTop; } function stopFall(){ if (stopfall==1) { clearTimeout(dofall); for (i = 0; i < num_elements; i++) { with(eval(falllayer)) { top = 0; left = -500; } } stopfall = 0; }else{ stopfall = 1; fall(); } } function newobj(q,t){ x=parseInt(Math.random()*element_info.length); spin = parseInt(Math.random()*slider); spin = (Math.random()>0.5) ? spin : -spin; o[q] = new Array( parseInt(Math.random()*(winWid()-slider)), //0 -30, // 1 spin, // 2 0.02+Math.random()/10, // 3 parseInt(1+Math.random()*fallmax), // 4 element_info[x][1], // 5 element_info[x][2], // 6 element_info[x][0], // 7 element_info[x][3], // 8 0 // 9 ); if(t==1) { if(ns4) { document.write('<layer '+css_layerdiv+' name="gf'+q+'" left="0" top="0" visibility="show"><img src="'+o[q][7]+'" border="0"></layer>'); } if(ie4||ns6) { document.write('<img '+css_img_style+' src="'+o[q][7]+'" border="0" id="gf'+q+'" style="POSITION: absolute; Z-INDEX: -'+q+'; VISIBILITY: visible; TOP: 0px; LEFT: 0px;">'); } } if(t==0 && !ns4) { tem=(ie4)? document.all['gf'+q] : document.getElementById('gf'+q); tem.src=o[q][7]; } } function fall(){ for (i = 0; i < num_elements; i++) { if((o[i][1]>winHei()-o[i][6]-10) || (o[i][0]>winWid()-slider-o[i][5])) { newobj(i,0); } o[i][1] += o[i][4]; o[i][0] += wind; o[i][9] += o[i][3]; sizexy = (o[i][8]==1)? Math.sin(o[i][9]) : 1; lay = (ie4)? sizexy : parseInt(sizexy+1); with(eval(falllayer)) { top = o[i][1] + winOfy(); left = o[i][0] + o[i][2]*Math.cos(o[i][9]); if(!ns4) { zIndex = lay; width = parseInt(((o[i][5]/4)*3)+((o[i][5]/4)*sizexy)); height = parseInt(((o[i][6]/4)*3)+((o[i][6]/4)*sizexy)); } } } dofall = setTimeout("fall()", speed); } for (i = 0; i < num_elements; i++) { newobj(i,1); } dofall = setTimeout("fall()", 100); document.write('<a href="JavaScript:stopFall();">Stop effect</a>'); </script>

Carefully applied an animated background can enhance a visitors experience, too much however can produce the opposite result. Flashy effects may look good but they can be distracting and annoying to web site visitors if overly applied.

Another factor often not considered is how much will the animated background slow down your page loading in a visitors browser. The extra page code required for some effects can be considerable.

You can read more about how different types of animated background and other images affect page download times at Animated Image.

In the animated background demo, the java script code adds only 3.1kB to the page, plus the size of the two animated gif images ( 16.6kB ).

This makes a total addition to the page of just under 20kB, which is very good for this type of effect.

Sincerely

Making Your Website Better for You