Full version: jsB@nk » Image » Rotation » Stunning 3D Animation
URL: https://www.javascriptbank.com/stunning-3d-animation.html
By applying the new DHTML image stretch technology you are able to create a stunning 3D-Effect-Animation with one simple image.
Full version: jsB@nk » Image » Rotation » Stunning 3D Animation
URL: https://www.javascriptbank.com/stunning-3d-animation.html
<style>v:* { behavior: url(#default#VML); }</style><SCRIPT>// 3D-Slideshow// set the URLs of your images// add as amy as you likevar slideurl=new Array()slideurl[0]="../image/logojs.gif"slideurl[1]="../image/bannerechip.gif"slideurl[2]="../image/logojs.gif"// add a corresponding link for each image// if you don't wont to link an image, enter "#"var slidelink=new Array()slidelink[0]="http://www.altavista.com"slidelink[1]="#"slidelink[2]="http://www.google.com"// add a corresponding target for each link// acceptable values "_blank" or "_top" or "_parent" or "_self"var slidetarget=new Array()slidetarget[0]="_blank"slidetarget[1]="_self"slidetarget[2]="_top"// set the width of the 3D-border (pixels)var backdepth=6// set thecolorof the 3D-border (HTML-values required)var fillcolor="#666666"// set the standstill (seconds) for the images (required for Netscape Navigator)var standstill=3// set the form of the imageframe// acceptable values are "oval" or "rect"var imageform="oval"// do not edit below this linevar slidewidth=1var slideheight=1var ns6=document.getElementById&&!document.all?1:0 var opera=navigator.userAgent.match(/Opera/) var ie5=document.getElementById&&document.all&&!opera?1:0 standstill*=1000var floatingspeed=1var tempo=20var numberofimages=slideurl.length-1var stepx=new Array()var stepy=new Array()for (i=0;i<=numberofimages;i++) {stepx[i]=randommakerNS(floatingspeed)stepy[i]=randommakerNS(floatingspeed)}var imgwidth=new Array()var imgheight=new Array()for (i=0;i<=numberofimages;i++) {imgwidth[i]=10imgheight[i]=10}var x,yvar marginbottomvar marginleft=0var margintop=0var marginrightvar timervar i_fadestrength=new Array()var i_fadestep=new Array()var i_fadenow=new Array()var i_fadenowmax=new Array()for (i=0;i<=slideurl.length;i++) {i_fadenowmax[i]=2i_fadestrength[i]=randommakerNS(99)i_fadestep[i]=1i_fadenow[i]=0}var spancontent=new Array()var i_spancontent=0var imgpreload=new Array()for (i=0;i<=slideurl.length;i++) {imgpreload[i]=new Image()imgpreload[i].src=slideurl[i]}for (i=0;i<=numberofimages;i++) {spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a>"}var i_angle1=0var i_size=1var i_pic=0var posleft=0var postop=0var x_extrusionangle=0var y_extrusionangle=0var x_rotationcenter=0var y_rotationcenter=0var pagewidthvar pageheightfunction initNS() { marginbottom=window.innerHeight-11 marginright=window.innerWidth-11 var thisspan=document.getElementById('span0')thisspan.innerHTML=spancontent[0]var thisspan=document.getElementById('span0')imgwidth[0]=parseInt(thisspan.offsetWidth)imgheight[0]=parseInt(thisspan.offsetHeight)var maxleftstart=marginright-imgwidth[0]var maxtopstart=marginbottom-imgheight[0]var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+randommakerNS(maxleftstart)thisspan.top=parseInt(thisspan.top)+randommakerNS(maxtopstart) thisspan.visibility="visible" checkmovementNS()}function randommakerNS(range) {rand=Math.floor(range*Math.random())if (rand==0) {rand=Math.ceil(range/2)} return rand}function checkmovementNS() {checkpositionNS()movepicturesNS() timer=setTimeout("checkmovementNS()",tempo)}function movepicturesNS() { var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+stepx[0]thisspan.top=parseInt(thisspan.top)+stepy[0]i_fadenow[0]++if (i_fadenow[0]>=i_fadenowmax[0]) {i_fadenow[0]=0if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1}else if (i_fadestrength[0]<=0) {i_fadestep[0]=i_fadestep[0]*-1i_spancontent++if (i_spancontent>=spancontent.length) {i_spancontent=0}document.getElementById('span0').innerHTML=spancontent[i_spancontent]}}i_fadestrength[0]+=i_fadestep[0]document.getElementById('span0').style.MozOpacity=Math.round(i_fadestrength[0])/100}function checkpositionNS() {imgwidth[0]=parseInt(document.getElementById('span0').offsetWidth)imgheight[0]=parseInt(document.getElementById('span0').offsetHeight) var thisspan=document.getElementById('span0').stylevar leftx=parseInt(thisspan.left)var topy=parseInt(thisspan.top)if (leftx>marginright-imgwidth[0]-floatingspeed) {thisspan.left=leftx-Math.abs(stepx[0]+1)stepx[0]=randommakerNS(floatingspeed)*-1}if (leftx<marginleft) {thisspan.left=leftx+Math.abs(stepx[0])stepx[0]=randommakerNS(floatingspeed)}if (topy>marginbottom-imgheight[0]-floatingspeed) {thisspan.top=topy-Math.abs(stepy[0])stepy[0]=randommakerNS(floatingspeed)*-1}if (topy<margintop) {thisspan.top=topy+Math.abs(stepy[0])stepy[0]=randommakerNS(floatingspeed)}}function initIE() {var i_preload=0for (i=0;i<=slideurl.length-1;i++) {var imgref=eval("document.n"+i)if (imgref.complete) {i_preload++}}if (i_preload>=slideurl.length-1) {slidewidth=document.getElementById('spn1').offsetWidthslideheight=document.getElementById('spn1').offsetHeightpagewidth=document.body.clientWidthpageheight=document.body.clientHeightdocument.getElementById('rectid').style.width=slidewidthdocument.getElementById('rectid').style.height=slideheightposleft=(pagewidth-slidewidth)/2postop=(pageheight-slideheight)/2x_rotationcenter=(posleft/slidewidth)/2y_rotationcenter=(postop/slideheight)/2var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenterdocument.getElementById('rectid').style.left=posleftdocument.getElementById('rectid').style.top=postopdocument.getElementById('extrusionid').rotationcenter=rotationcenterrotateIE()}else {var timer=setTimeout("initIE()",200)}}function rotateIE() {i_angle1+=1if (i_angle1>=360) {i_angle1=0}if (i_angle1==127) {i_pic++if (i_pic>=slideurl.length) {i_pic=0}document.getElementById('fillid').src=slideurl[i_pic]}document.getElementById('rectid').style.rotation=i_angle1document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1var timer=setTimeout("rotateIE()",30)}function openpageIE() {if (slidetarget[i_pic]=="_blank") {window.open(slidelink[i_pic])}else if (slidetarget[i_pic]=="_self") {document.location.href(slidelink[i_pic])}else if (slidetarget[i_pic]=="_top" || slidetarget[i_pic]=="_parent") {top.location.href(slidelink[i_pic])}}if (ns6) {document.write("<span id='span0' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0'></span>") document.close()window.onload=initNS}if (ie5) {document.write('<div id="preloadimages" style="position:absolute;left:0px;top:-5px;visibility:hidden">')for (i=0;i<=slideurl.length-1;i++) {document.write('<span id="spn'+i+'" style="position:absolute;width:2px;left:0px;top:0px;">')document.write('<img src="'+slideurl[i]+'" name="n'+i+'">')document.write('</span>')}document.write('</div>') document.write('<v:'+imageform+' id="rectid" style="position:absolute;top:0;left:0;width:'+slidewidth+';height:'+slideheight+'" onClick="openpageIE()">') document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" rotationcenter="0,0,0" backdepth="'+backdepth+'" diffusity="2.5" metal="true">') document.write('</v:extrusion>')document.write('<v:fill id="fillid" opacity="100%" color="'+fillcolor+'" type="frame" src="'+slideurl[0]+'"/>') document.write('</v:'+imageform+'>')window.onload=initIE }</script>