JavaScript animation: snowmaker

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Floating Images Animation
This Fun JavaScript makes your images float all over your webpage. Crossbrowser fade-in and fade-out effect. Add as many images as you like. True copy-and-paste installation. Internet Explorer 5x/6x/7x/8x and Firefox 2x/3x, Opera 7x/8x/9x/10x and Google Chrome 3x/4x.

Configuration

Step 1: Open your webpage and paste the following code right above the </body>-tag, close to the bottom of the page:

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// The images (URLS). Add as many pictures as you like
var slideurl=new Array("pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg")

// The comments for each image
var slidecomment=new Array("Tina", "Beth", "Maureen", "Wilma")

// The links, corresponding to the images above. Set "#" if your images should be NOT linked.
var slidelink=new Array("http://www.fabulant.com","http://www.fabulant.com","http://www.fabulant.com","#")

// The targets, corresponding to the links above
var slidetarget=new Array("_blank","_blank","_blank","_blank")

// Font of comment
var slidefont="Arial"

// Color of font
var slidefontcolor="black"

// Size of font (accepted values: 1 - 6)
var slidefontsize="1"

// Do not edit below this line
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var floatingspeed=10
var tempo=20
var numberofimages=slideurl.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
	imgwidth[i]=10
	imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var 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]=randommaker(10)+2	
	i_fadestrength[i]=randommaker(99)	
	i_fadestep[i]=1
	i_fadenow[i]=0
}

var spancontent=new Array()
var 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><br><font face='"+slidefont+"' color='"+slidefontcolor+"' size='"+slidefontsize+"'>"+slidecomment[i]+"</font>"
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

function checkposition() {
	if (ie) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-imgwidth[i]-floatingspeed) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-imgheight[i]-floatingspeed) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	
	if (ns6) {
		for (i=0;i<=numberofimages;i++) {  
			imgwidth[i]=parseInt(document.getElementById('span'+i).offsetWidth)
			imgheight[i]=parseInt(document.getElementById('span'+i).offsetHeight)         
			var thisspan=document.getElementById('span'+i).style
			var leftx=parseInt(thisspan.left)
			var topy=parseInt(thisspan.top)
			if (leftx>marginright-imgwidth[i]-floatingspeed) {
				thisspan.left=leftx-Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (leftx<marginleft) {
				thisspan.left=leftx+Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (topy>marginbottom-imgheight[i]-floatingspeed) {
				thisspan.top=topy-Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (topy<margintop) {
				thisspan.top=topy+Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

if (ie || ns6) {
	for (i=0;i<=numberofimages;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);opacity:0';visibility:hidden></span>")
    	document.close()
	}
window.onload=setValues
}
</script>
<div id="emptydiv" style="position:absolute;top:0px;left:0px;visibility:hidden">Do not delete</div>

IMPORTANT: Do not paste this code into any tables or <DIV> and </DIV> or between any other container!

Step 2: Go to the top of the script and configure the images, links and messages:

Do not delete