Fun of JavaSvript: 3D background animation with one single image

3D background animation with one single image
Create a stunning 3D background animation with just one simple image. IE 5x/6x/7x/8x, FF 3x/4x, Opera 7x/8x/9x/10x, Chrome 3x/4x.

Brought to you by www.fabulant.com

Install it

Step 1: Open your webpage. Paste the following code right below the <body>-tag.

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where the script will be running.

// The filename of your backgroundimage-file. Put the image into the same folder
// as your HTML-file.
var imgsrc="bgimgstretchTunnel.jpg"

// The strength of the morphing effect. Choose a value between 1.1 and 2 
// Higher values will slow down the script.
var stretchstrength=2.0

// Do not edit the variables below unless you know what you are doing ...
var pause=100

var imgpreload=new Image()
imgpreload.src=imgsrc

var screenwidth=0
var screenheight=0
var imgwidthA
var imgheightA
var imgwidthB
var imgheightB
var imgwidthC
var imgheightC
var imgwidthD
var imgheightD
var x_step=0
var y_step=0
var max_step=20

var clipleft
var clipright
var cliptop
var clipbottom

function initiate() {
	x_step=0
	y_step=0
    screenwidth=document.body.clientWidth
    screenheight=document.body.clientHeight
	imgwidthA=screenwidth
	imgheightA=screenheight
	setnewsize()	
}

function newpos() {
		bgimageA.innerHTML="<img src="+imgsrc+" width="+imgwidthA+" height="+imgheightA+">"
		bgimageB.innerHTML="<img src="+imgsrc+" width="+imgwidthB+" height="+imgheightB+">"
		bgimageC.innerHTML="<img src="+imgsrc+" width="+imgwidthC+" height="+imgheightC+">"
		bgimageD.innerHTML="<img src="+imgsrc+" width="+imgwidthD+" height="+imgheightD+">"
		
		document.getElementById('bgimageA').style.left=0
    	document.getElementById('bgimageA').style.top=0
		clipleft=0
		clipright=imgwidthA/2
		cliptop=0
		clipbottom=imgheightA/2
		document.getElementById('bgimageA').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		
		document.getElementById('bgimageB').style.left=imgwidthA/2-imgwidthB/2
    	document.getElementById('bgimageB').style.top=0
		clipleft=imgwidthB/2
		clipright=imgwidthB
		cliptop=0
		clipbottom=imgheightB/2
		document.getElementById('bgimageB').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		
		document.getElementById('bgimageC').style.left=0
    	document.getElementById('bgimageC').style.top=imgheightA/2-imgheightC/2
		clipleft=0
		clipright=imgwidthC/2
		cliptop=imgheightC/2
		clipbottom=imgheightC
		document.getElementById('bgimageC').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		
		document.getElementById('bgimageD').style.left=imgwidthA/2-imgwidthB/2
    	document.getElementById('bgimageD').style.top=imgheightA/2-imgheightC/2
		clipleft=imgwidthD/2
		clipright=imgwidthD
		cliptop=imgheightD/2
		clipbottom=imgheightD
		document.getElementById('bgimageD').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

}

function stretchimg() {
	imgwidthA+=x_step
	imgheightA+=y_step
	imgwidthB=2*screenwidth-imgwidthA
	imgheightB=imgheightA
	imgwidthC=imgwidthA
	imgheightC=2*screenheight-imgheightA
	imgwidthD=2*screenwidth-imgwidthA
	imgheightD=2*screenheight-imgheightA
	
	if (imgwidthA<=screenwidth*stretchstrength && imgheightA<=screenheight*stretchstrength) {
		newpos()
		i_loop++
		var timer=setTimeout("stretchimg()",pause)
	}
	else {
		clearTimeout(timer)
		shrinkimg()
	}
}

function shrinkimg() {
	imgwidthA-=x_step
	imgheightA-=y_step
	imgwidthB=2*screenwidth-imgwidthA
	imgheightB=imgheightA
	imgwidthC=imgwidthA
	imgheightC=2*screenheight-imgheightA
	imgwidthD=2*screenwidth-imgwidthA
	imgheightD=2*screenheight-imgheightA
	if (imgwidthA>=screenwidth/stretchstrength && imgheightA>=screenheight/stretchstrength) {
		newpos()
		i_loop--
		var timer=setTimeout("shrinkimg()",pause)
	}
	else {
		clearTimeout(timer)
		setnewsize()
	}
}

function setnewsize() {
	x_step=Math.floor(max_step*Math.random())
	y_step=Math.floor(max_step*Math.random())
	i_loop=0
	stretchimg()
}

document.write('<DIV ID="bgimageA" style="position:absolute;top:-8000px;"></DIV>')
document.write('<DIV ID="bgimageB" style="position:absolute;top:-8000px;"></DIV>')
document.write('<DIV ID="bgimageC" style="position:absolute;top:-8000px;"></DIV>')
document.write('<DIV ID="bgimageD" style="position:absolute;top:-8000px;"></DIV>')
document.write('<DIV id="delethethistext" style="position:absolute;top:20px;left:20px;">')

window.onresize=initiate
window.onload=initiate

</script>

Step 2: Save the image below. Do not change its name. Put it in den same Folder as your webpage.

Step 3: Embed the red code below right into your <body>-tag.
<BODY style="width:100%;overflow-x:hidden;overflow-y:hidden">