Full version: jsB@nk » Background » Background Morphing Animation
URL: https://www.javascriptbank.com/background-morphing-animation.html
This JavaScript allows you to create a cute background morphing animation. Only one image needed. Crossbrowser (it runs much smoother with Internet Explorer). Easy configuration of morphing-strength.
Full version: jsB@nk » Background » Background Morphing Animation
URL: https://www.javascriptbank.com/background-morphing-animation.html
<SCRIPT language=JavaScript><!-- Beginning of JavaScript -// Background Morphing Animation/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/// Author: Peter Gehrig // Web Site: http://www.24fun.com // The filename of your backgroundimage-file (Put it into the same folder// as your HTML-file).var imgsrc="../image/pic191.jpg"// The strength of the morphing effect. Choose a value between 1.1 and 1.9. // Higher values will slow down the script.var stretchstrength=1.7// Do not edit the variables below unless you know what you are doing ...var pause=120var imgpreload=new Image()imgpreload.src=imgsrcvar screenwidth=0var screenheight=0var imgwidthAvar imgheightAvar imgwidthBvar imgheightBvar imgwidthCvar imgheightCvar imgwidthDvar imgheightDvar x_step=0var y_step=0var max_step=20var clipleftvar cliprightvar cliptopvar clipbottomfunction initiate() {x_step=0y_step=0 if (document.layers) { screenwidth=window.innerWidth screenheight=window.innerHeightimgwidthA=screenwidthimgheightA=screenheightsetnewsize() } if (document.all) { screenwidth=document.body.clientWidth screenheight=document.body.clientHeightimgwidthA=screenwidthimgheightA=screenheightsetnewsize() }}function newpos() {if (document.all) {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.all.bgimageA.style.posLeft=0 document.all.bgimageA.style.posTop=0clipleft=0clipright=imgwidthA/2cliptop=0clipbottom=imgheightA/2document.all.bgimageA.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.bgimageB.style.posLeft=imgwidthA/2-imgwidthB/2 document.all.bgimageB.style.posTop=0clipleft=imgwidthB/2clipright=imgwidthBcliptop=0clipbottom=imgheightB/2document.all.bgimageB.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.bgimageC.style.posLeft=0 document.all.bgimageC.style.posTop=imgheightA/2-imgheightC/2clipleft=0clipright=imgwidthC/2cliptop=imgheightC/2clipbottom=imgheightCdocument.all.bgimageC.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.bgimageD.style.posLeft=imgwidthA/2-imgwidthB/2 document.all.bgimageD.style.posTop=imgheightA/2-imgheightC/2clipleft=imgwidthD/2clipright=imgwidthDcliptop=imgheightD/2clipbottom=imgheightDdocument.all.bgimageD.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"}if (document.layers) {document.bgimageA.document.write("<img src="+imgsrc+" width="+imgwidthA+" height="+imgheightA+">")document.bgimageA.document.close()document.bgimageB.document.write("<img src="+imgsrc+" width="+imgwidthB+" height="+imgheightB+">")document.bgimageB.document.close()document.bgimageC.document.write("<img src="+imgsrc+" width="+imgwidthC+" height="+imgheightC+">")document.bgimageC.document.close()document.bgimageD.document.write("<img src="+imgsrc+" width="+imgwidthD+" height="+imgheightD+">")document.bgimageD.document.close()document.bgimageA.left=0 document.bgimageA.top=0document.bgimageA.clip.left=0document.bgimageA.clip.right=imgwidthA/2document.bgimageA.clip.top=0document.bgimageA.clip.bottom=imgheightA/2document.bgimageB.left=imgwidthA/2-imgwidthB/2 document.bgimageB.top=0document.bgimageB.clip.left=imgwidthB/2document.bgimageB.clip.right=imgwidthBdocument.bgimageB.clip.top=0document.bgimageB.clip.bottom=imgheightB/2document.bgimageC.left=0 document.bgimageC.top=imgheightA/2-imgheightC/2document.bgimageC.clip.left=0document.bgimageC.clip.right=imgwidthC/2document.bgimageC.clip.top=imgheightC/2document.bgimageC.clip.bottom=imgheightCdocument.bgimageD.left=imgwidthA/2-imgwidthB/2 document.bgimageD.top=imgheightA/2-imgheightC/2document.bgimageD.clip.left=imgwidthD/2document.bgimageD.clip.right=imgwidthDdocument.bgimageD.clip.top=imgheightD/2document.bgimageD.clip.bottom=imgheightD}}function stretchimg() {imgwidthA+=x_stepimgheightA+=y_stepimgwidthB=2*screenwidth-imgwidthAimgheightB=imgheightAimgwidthC=imgwidthAimgheightC=2*screenheight-imgheightAimgwidthD=2*screenwidth-imgwidthAimgheightD=2*screenheight-imgheightAif (imgwidthA<=screenwidth*stretchstrength && imgheightA<=screenheight*stretchstrength) {newpos()i_loop++var timer=setTimeout("stretchimg()",pause)}else {clearTimeout(timer)shrinkimg()}}function shrinkimg() {imgwidthA-=x_stepimgheightA-=y_stepimgwidthB=2*screenwidth-imgwidthAimgheightB=imgheightAimgwidthC=imgwidthAimgheightC=2*screenheight-imgheightAimgwidthD=2*screenwidth-imgwidthAimgheightD=2*screenheight-imgheightAif (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=0stretchimg()}window.onresize=initiate// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=initiate()><div style="z-index: 100; width: 100%; position: absolute;"></div><DIV id=bgimageA style="POSITION: absolute; TOP: -8000px"></DIV><DIV id=bgimageB style="POSITION: absolute; TOP: -8000px"></DIV><DIV id=bgimageC style="POSITION: absolute; TOP: -8000px"></DIV><DIV id=bgimageD style="POSITION: absolute; TOP: -8000px"></DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/pic191.jpg