Phiên bản đầy đủ: jsB@nk » Màu nền » Ảnh nền động
URL: https://www.javascriptbank.com/bgimgstretch3d-stunning-3d-animation-with-one-single-image.html
Đoạn mã tạo hiệu ứng ảnh nền di chuyển trên trang web.
Phiên bản đầy đủ: jsB@nk » Màu nền » Ảnh nền động
URL: https://www.javascriptbank.com/bgimgstretch3d-stunning-3d-animation-with-one-single-image.html
<SCRIPT LANGUAGE="JavaScript"><!-- Beginning of JavaScript -/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/// CREDITS:// Stunning 3D-animation with one single image (gif or jpg) // by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.// CONFIGURATION:// The filename of your backgroundimage-file. Put the image into the same folder// as your HTML-file.var imgsrc="bgimgstretch3D1.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=100var 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; visibility: visble; position: absolute; width: 100%;"></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/background/bgimgstretch3D/bgimgstretch3D1.jpg