Happy New Year Animation: champagne please

Happy New Year Animation: champagne please

Celebrate the New Year with your visitors and open a bottle of cyber-champagne. Unqiue litte DHTML and JavaScript animation. Crossbrowser. True copy-and-paste installation! IE 5x/6x/7x/8x, FF 2x/3x/4x, Opera 7x/8x/9x/10x, Chrome 3x/4x

Brought to you by www.fabulant.com

Configuration

Step 1: Download the 9 images below and put them all 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 of your webpage (close to the bottom of the webpage):

<script>
// CREDITS:
// Happy New Year: champagne please by Urs Dudli and Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

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

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Set the message on the bottle
var newyearmessage="Click bottle to celebrate New Year"

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// do not edit lines below
var tempo=40
var stepx=20
var stepy=-20
var i_steps=0
var i_wallhits=0
var max_wallhits=5
var goOn=true

// do not edit the variables below
var korkenupleft=new Image()
korkenupleft.src="korkenupleft.gif"
var korkenupright=new Image()
korkenupright.src="korkenupright.gif"
var korkendownleft=new Image()
korkendownleft.src="korkendownleft.gif"
var korkendownright=new Image()
korkendownright.src="korkendownright.gif"

var champagnebottle0=new Image()
champagnebottle0.src="champagnebottle0.gif"
var champagnebottle1=new Image()
champagnebottle1.src="champagnebottle1.gif"
var champagnebottle2=new Image()
champagnebottle2.src="champagnebottle2.gif"
var champagnebottle3=new Image()
champagnebottle3.src="champagnebottle3.gif"
var champagnebottle4=new Image()
champagnebottle4.src="champagnebottle4.gif"

var numberofimages=0
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var korkenstartleft
var korkenstarttop
var timer
var xpos=new Array()
var ypos=new Array()
var spancontent=new Array()

for (i=0; i<=numberofimages;i++) {
    xpos[i]=0
	ypos[i]=0
}

function resetvalues() {
	i_steps=0
	i_wallhits=0
	max_wallhits=6
	goOn=true
	numberofimages=0
	var x,y
	stepx=15
	stepy=-15
	positionchampagne()
}

function positionchampagne() {
	marginbottom=document.body.clientHeight-70
    marginright=document.body.clientWidth-50         
	document.getElementById('champagnebottle').innerHTML="<a href='javascript:openbottle1()'><img src='champagnebottle0.gif' border=0></a>"
	document.getElementById('explain').innerHTML="<table cellspacing=0 cellpadding=3 border=1 width=80><tr><td bgcolor=black><font size=1 face=Verdana color=white>"+newyearmessage+"</td></tr></table></font>"
	randommaker(150)
	document.getElementById('champagnebottle').style.left=marginright/2+rand+"px"
	document.getElementById('champagnebottle').style.top=marginbottom-120+"px"
	document.getElementById('explain').style.left=parseInt(document.getElementById('champagnebottle').style.left)-30+"px"
	document.getElementById('explain').style.top=parseInt(document.getElementById('champagnebottle').style.top)+40+"px"
}

function openbottle1() {
	document.getElementById('champagnebottle').innerHTML="<img src='champagnebottle1.gif' border=0>"
	document.getElementById('explain').innerHTML=""
	var tmr=setTimeout("openbottle2()",150)
}

function openbottle2() {
	document.getElementById('champagnebottle').innerHTML="<img src='champagnebottle2.gif' border=0>"
	var tmr=setTimeout("openbottle3()",150)
}

function openbottle3() {
	document.getElementById('champagnebottle').innerHTML="<img src='champagnebottle3.gif' border=0>"
	var tmr=setTimeout("openkorken()",150)
}

function openkorken() {
	korkenstarttop=parseInt(document.getElementById('champagnebottle').style.top)
	korkenstartleft=parseInt(document.getElementById('champagnebottle').style.left)+80
	for (i=0;i<=numberofimages;i++) {             
		var thisspan = eval("document.getElementById('span0')")
    	thisspan.innerHTML="<img src='korkenupright.gif'>"
		var thisspan = eval("document.getElementById('span0').style")
        thisspan.left=korkenstartleft+"px"
		thisspan.top=korkenstarttop+"px"
	}
	moveball()
}

function randommaker(range) {	
	rand=Math.floor(range*Math.random())
	var plusminus=Math.round(Math.random())
	if (plusminus>=0.5) {rand=rand*-1}
	window.status=rand
    return rand
}

function moveball() {
	i_steps++
	if (goOn) {
		if (i_steps==10) {
			document.getElementById('champagnebottle').innerHTML="<img src='champagnebottle4.gif' border=0>"
		}
		checkposition()
   		makesnake()
   		document.getElementById('span0').style.top=parseInt(document.getElementById('span0').style.top)+stepy+"px"
    	timer=setTimeout("moveball()",tempo)
	}
	else {
		document.getElementById('span0').innerHTML=" "
		var tmr=setTimeout("resetvalues()",2000)
	}
}

function changekorken() {
	i_wallhits++
	if (i_wallhits>=max_wallhits) {goOn=false}
	else {
		if (stepx<0 && stepy<0){
			document.getElementById('span0').innerHTML="<img src='korkenupleft.gif'>"
		}
		if (stepx>0 && stepy<0){
			document.getElementById('span0').innerHTML="<img src='korkenupright.gif'>"
		}
		if (stepx>0 && stepy>0){
			document.getElementById('span0').innerHTML="<img src='korkendownright.gif'>"
		}	
		if (stepx<0 && stepy>0){
			document.getElementById('span0').innerHTML="<img src='korkendownleft.gif'>"
		}
	}
}

function checkposition() {
	if (parseInt(document.getElementById('span0').style.left)>marginright) {
		stepx=stepx*-1
		document.getElementById('span0').style.left=parseInt(document.getElementById('span0').style.left)-1+"px"
		changekorken()
	}
	if (parseInt(document.getElementById('span0').style.left)<marginleft) {
		stepx=stepx*-1
		document.getElementById('span0').style.left=parseInt(document.getElementById('span0').style.left)+1+"px"
		changekorken()
	}	
	if (parseInt(document.getElementById('span0').style.top)>marginbottom) {
		stepy=stepy*-1
		document.getElementById('span0').style.top=parseInt(document.getElementById('span0').style.top)-1+"px"
		changekorken()
	}
	if (parseInt(document.getElementById('span0').style.top)<margintop) {
		stepy=stepy*-1
		document.getElementById('span0').style.top=parseInt(document.getElementById('span0').style.top)+1+"px"
		changekorken()
	}		
}

window.onresize=positionchampagne
window.onload=positionchampagne

</script>
<div id="span0" style="position:absolute"> </div>
<div id="champagnebottle" style="position:absolute"> </div>
<div id="explain" style="position:absolute"> </div>
<div id="empytnetscape" style="position:absolute"> </div>