Full version: jsB@nk » Image » Rotation » ImageFactory reassembles your images out of the debris
URL: https://www.javascriptbank.com/imagefactory-reassembles-your-images-out-of-the-debris.html
Add a little magic to your image-presentation with this JavaScript! First you will see only the debris of your image randomly spread out all over the browser screen. Then those scattered image-pieces will be drawn together by a strong magnetic force until the image has been recreated out of those debris! Made for IE5 and higher.
Full version: jsB@nk » Image » Rotation » ImageFactory reassembles your images out of the debris
URL: https://www.javascriptbank.com/imagefactory-reassembles-your-images-out-of-the-debris.html
<STYLE>.spanstyle {LEFT: -5000px; POSITION: absolute}</STYLE><SCRIPT><!-- Beginning of JavaScript -// CONFIGURATION:// 1.Create your images (gif or jpg). They should have the same width and height.// Put those images in the same directory as the HTML-file. //You can add as many images as you like to this show.// 2. Copy and paste the two script-blocks into your HTML-file:// Put the first script-block inside the head-section of your HTML-file.//Put the second script-block right at the end of the //body-section of your HTML-file.// 2.Copy and paste the style-sheet into head-section of your HTML-file.// 3. Insert 'onLoad="changeimage()"' into the body tag.// 4. Configure the variables below:// The width of your images (pixels). All pictures should have the same width.var imgwidth=400// The height of your images (pixels). All pictures should have the same height.var imgheight=240// The URL of your images. You may add as many images as you like.var imgurl=new Array()imgurl[0]="logojs.gif"imgurl[1]="photo4.jpg"imgurl[2]="photo3.jpg"// Do not edit this block.var imgpreload=new Array()for (i=0;i<=imgurl.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=imgurl[i]}// Final horizontal position of the image: distance to the left margin of the windowvar x_finalpos=240// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=80// Number of sliced cells (the higher this value the slower the script)var x_slices=8// Number of sliced rows (the higher this value the slower the script)var y_slices=3// Speed of the reassembling effect. More means slower.var pause=10// The width and heigth of the zone where the debris of the images are spread (pixels)var screenwidth=800var screenheight=500// Do not change the variables belowvar x_step=new Array()var y_step=new Array()var x_randompos=0var y_randompos=0var i_loop=0var max_loop=20var i_image=0var width_slice=Math.floor(imgwidth/x_slices)var height_slice=Math.floor(imgheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0function initiate() {cliptop=0clipbottom=height_sliceclipleft=0clipright=width_slicei_loop=0spancounter=0 if (document.all) { for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")x_randompos=Math.ceil(screenwidth*Math.random())y_randompos=Math.ceil(screenheight*Math.random())thisspan.posLeft=x_randomposthisspan.posTop=y_randompos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"clipleft+=width_slice clipright+=width_slice spancounter++} clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice} } explode_IE()}function changeimage() {spancounter=0for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")thisspan.posLeft=-5000thisspan.posTop=-5000spancounter++}}spancounter=0if (i_image>imgurl.length-1) {i_image=0}for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisinnerspan=eval("span"+spancounter) thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>"spancounter++}}i_image++initiate()}function explode_IE() {spancounter=0if (i_loop<=max_loop-1) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)thisspan.posLeft+=x_step[spancounter]thisspan.posTop+=y_step[spancounter]spancounter++}}i_loop++var timer=setTimeout("explode_IE()",pause)}else {spancounter=0clearTimeout(timer)var timer=setTimeout("changeimage()",2000)}}// - End of JavaScript - --></SCRIPT><BODY onload=changeimage()><SCRIPT><!-- Beginning of JavaScript -if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) { document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")spancounter++}}spancounter=0}// - End of JavaScript - --></SCRIPT></BODY>