Fun of JavaScript: FlowerPower Spring Animation

» 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

JavaScript FlowerPower Spring Animation
Add springtime all over your webpage with this charming sweet and free JavaScript animation. Enchanting way to say hello to your visitors and make them blossom out. Easy configuration of number of blossoms and speed. Internet Explorer 5x/6x/7x/8x, Firefox 3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Configuration:

Step 1: Save the six images below and put them into the same folder as your webpage. Do not change their names!

Step 2: Open your webpage. Paste the following code right above the </body> tag (almost at the bottom of your webpage).

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

// number of blossoms
var numberofblossoms=20

// speed of blossom animation (higher means slower)
var openblossomspeed=100

// how long shall the blossom be visible after being opened? Answer in seconds
var showblossomstime=2

// do not edit the variables below
var frame=new Array()
frame[0]=new Image()
frame[0].src="frame1.gif"
frame[1]=new Image()
frame[1].src="frame2.gif"
frame[2]=new Image()
frame[2].src="frame3.gif"
frame[3]=new Image()
frame[3].src="frame4.gif"
frame[4]=new Image()
frame[4].src="frame5.gif"
frame[5]=new Image()
frame[5].src="frame6.gif"

var i_nownumberofframes=0
var i_maxnumberofframes=5
var i_numberofblossoms=0

var marginleft=0
var margintop=0
var marginbottom
var marginright

var timer
var thisblossom

showblossomstime=showblossomstime*1000

function positionblossoms() {
	marginbottom=document.body.clientHeight-40
    marginright=document.body.clientWidth-40    
	for (i=0;i<=numberofblossoms;i++) {     
		var randx=Math.floor(marginright*Math.random())
		var randy=Math.floor(marginbottom*Math.random())
		thisblossom=eval("document.getElementById('blossom"+i+"').style")
		thisblossom.left=randx
		thisblossom.top=randy
		thisblossom.visibility="visible"
	}
	thisblossom=eval("blossom0")
	openblossoms()
}

function openblossoms() {
	clearTimeout(timer)
	if (i_nownumberofframes<=i_maxnumberofframes) {
		thisblossom.innerHTML="<img src='"+frame[i_nownumberofframes].src+"'>"
		i_nownumberofframes++
		timer=setTimeout("openblossoms()",openblossomspeed)
	}
	else  {
		clearTimeout(timer)
		i_nownumberofframes=0
		switchtonextblossom()
	}
}

function switchtonextblossom() {
	i_numberofblossoms++
	if (i_numberofblossoms<=numberofblossoms) {
		thisblossom=eval("blossom"+i_numberofblossoms)
		openblossoms()
	}
	else {
		setTimeout("hideblossoms()",showblossomstime)
	}
}

function hideblossoms() {
	for (i=0;i<=numberofblossoms;i++) {     
		thisblossom=eval("document.getElementById('blossom"+i+"').style")
		thisblossom.visibility="hidden"
	}
}

for (i=0;i<=numberofblossoms;i++) {
	document.write("<div id='blossom"+i+"' style='position:absolute;top:0px;left:0px;visibility:hidden;'><img name='blossomimg"+i+"' src='frame1.gif'></div>")
	document.clear()
}
window.onresize=positionblossoms
window.onload=positionblossoms
</script>

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

Step 4: Open your webpage, go to the top of the script and and configure the number of blossoms, the speed of animation and the time of blossom's visibility (see red code below):

// // number of blossoms
var numberofblossoms=10

peed of blossom animation (higher means slower)
var openblossomspeed=80

how long shall the blossom be visible after being opened? Answer in seconds
var showblossomstime=2