Full version: jsB@nk » Background » Psychedelic Background Morphing
URL: https://www.javascriptbank.com/psychedelic-background-animation.html
This never-repeating DHTML-animation uses a random function to create a rather psychedelic background animation. Only one image needed.
Full version: jsB@nk » Background » Psychedelic Background Morphing
URL: https://www.javascriptbank.com/psychedelic-background-animation.html
<SCRIPT LANGUAGE="JavaScript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/<!-- Beginning of JavaScript -// Psychedelic Background Animation// Author: Peter Gehrig // Web Site: http://www.24fun.com // The name of your backgroundimage-filevar imgsrc="../image/logojs.gif"// Do not edit the variables below unless you know what you are doing ...var pause=100var imgpreload=new Image()imgpreload.src=imgsrcvar screenwidth=0var screenheight=0var imgwidthAvar imgheightAvar imgwidthBvar imgheightBvar imgwidthCvar imgheightCvar imgwidthDvar imgheightDvar max_step=20var x_step=0var y_step=0function initiate() {x_step=0y_step=0 if (document.layers) { screenwidth=window.innerWidth screenheight=window.innerHeightimgwidthA=screenwidth/2imgheightA=screenheight/2 document.bgimageA.document.write("<img src="+imgsrc+" width="+screenwidth/2+">") document.bgimageA.document.close()document.bgimageB.document.write("<img src="+imgsrc+" width="+screenwidth/2+">") document.bgimageB.document.close()document.bgimageC.document.write("<img src="+imgsrc+" width="+screenwidth/2+">") document.bgimageC.document.close()document.bgimageD.document.write("<img src="+imgsrc+" width="+screenwidth/2+">") document.bgimageD.document.close() document.bgimageA.left=0 document.bgimageA.top=0 document.bgimageB.left=screenwidth/2 document.bgimageB.top=0 document.bgimageC.left=0 document.bgimageC.top=screenheight/2 document.bgimageD.left=screenwidth/2 document.bgimageD.top=screenheight/2 setnewsize() } if (document.all) { screenwidth=document.body.clientWidth screenheight=document.body.clientHeightimgwidthA=screenwidth/2imgheightA=screenheight/2max_loop=Math.floor(imgwidthA/max_step) bgimageA.innerHTML="<img src="+imgsrc+" width="+screenwidth/2+">"bgimageB.innerHTML="<img src="+imgsrc+" width="+screenwidth/2+">"bgimageC.innerHTML="<img src="+imgsrc+" width="+screenwidth/2+">"bgimageD.innerHTML="<img src="+imgsrc+" width="+screenwidth/2+">" document.all.bgimageA.style.posLeft=0 document.all.bgimageA.style.posTop=0document.all.bgimageB.style.posLeft=screenwidth/2 document.all.bgimageB.style.posTop=0document.all.bgimageC.style.posLeft=0 document.all.bgimageC.style.posTop=screenheight/2document.all.bgimageD.style.posLeft=screenwidth/2 document.all.bgimageD.style.posTop=screenheight/2setnewsize() }}function stretchimg() {imgwidthA+=x_stepimgheightA+=y_stepimgwidthB=screenwidth-imgwidthAimgheightB=imgheightAimgwidthC=imgwidthAimgheightC=screenheight-imgheightAimgwidthD=screenwidth-imgwidthAimgheightD=screenheight-imgheightAif (document.all && imgwidthA<=screenwidth && imgheightA<=screenheight) {document.all.bgimageA.style.posLeft=0 document.all.bgimageA.style.posTop=0document.all.bgimageB.style.posLeft=imgwidthA document.all.bgimageB.style.posTop=0document.all.bgimageC.style.posLeft=0 document.all.bgimageC.style.posTop=imgheightAdocument.all.bgimageD.style.posLeft=imgwidthA document.all.bgimageD.style.posTop=imgheightAbgimageA.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+">"i_loop++var timer=setTimeout("stretchimg()",pause)}else if (document.layers && imgwidthA<=screenwidth && imgheightA<=screenheight) {document.bgimageA.left=0 document.bgimageA.top=0document.bgimageB.left=imgwidthA document.bgimageB.top=0document.bgimageC.left=0 document.bgimageC.top=imgheightAdocument.bgimageD.left=imgwidthA document.bgimageD.top=imgheightAdocument.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()i_loop++var timer=setTimeout("stretchimg()",3*pause)}else {clearTimeout(timer)shrinkimg()}}function shrinkimg() {imgwidthA-=x_stepimgheightA-=y_stepimgwidthB=screenwidth-imgwidthAimgheightB=imgheightAimgwidthC=imgwidthAimgheightC=screenheight-imgheightAimgwidthD=screenwidth-imgwidthAimgheightD=screenheight-imgheightAif (document.all && imgwidthA>=2 && imgheightA>=2) {document.all.bgimageA.style.posLeft=0 document.all.bgimageA.style.posTop=0document.all.bgimageB.style.posLeft=imgwidthA document.all.bgimageB.style.posTop=0document.all.bgimageC.style.posLeft=0 document.all.bgimageC.style.posTop=imgheightAdocument.all.bgimageD.style.posLeft=imgwidthA document.all.bgimageD.style.posTop=imgheightAbgimageA.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+">"i_loop--var timer=setTimeout("shrinkimg()",pause)}else if (document.layers && imgwidthA>=2 && imgheightA>=2) {document.bgimageA.left=0 document.bgimageA.top=0document.bgimageB.left=imgwidthA document.bgimageB.top=0document.bgimageC.left=0 document.bgimageC.top=imgheightAdocument.bgimageD.left=imgwidthA document.bgimageD.top=imgheightAdocument.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()i_loop--var timer=setTimeout("shrinkimg()",3*pause)}else {clearTimeout(timer)var timer=setTimeout("setnewsize()",2000)}}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 bgcolor=#FFFFFF onLoad="initiate()" style="width:100%;overflow-x:hidden;overflow-y:hidden"> <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></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->