« »

Add a touch of Easter to your website with this sweet little DHTML animation. 3 different versions! True copy-and-paste installation. No configuration needed.

Label: Easter Cursor Trailer 1

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Copy All x2

<script>
// CREDITS:
// Easter Cursor Trailer
// by Peter Gehrig 
// Copyright (c) 2004 Peter Gehrig. All rights reserved.

var step=8 
var stepbasic=8
var numberofimages=8
var spacebetweenimgs=30
var x,y,x_old
var flag=0
var pagewidth
var pageheight
var xpos=new Array()

var ns6=document.getElementById&&!document.all?1:0

for (i=0;i<=8;i++) {
	xpos[i]=-100
}

var ypos=new Array()
for (i=0;i<=numberofimages;i++) {
	ypos[i]=-100
}

function handlerMM(e) {
	x = (document.layers || ns6) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers || ns6) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}

function initiatetracker() {
	if (document.all) {
		pageheight=document.body.clientHeight-30
    	pagewidth=document.body.clientWidth-30
		for (i=0; i<numberofimages; i++) {
    		var thisspan=eval("span"+(i)+".style")
			thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    		thisspan.visibility="visible"
    	}
		makesnake()
	}
    
   if (ns6) {
   		pageheight=window.innerHeight-30
    	pagewidth=window.innerWidth-30
		for (i=0; i<numberofimages; i++) {
			document.getElementById("span"+i).style.left=xpos[i]
			document.getElementById("span"+i).style.top=ypos[i]
    		document.getElementById("span"+i).style.visibility="visible"
    	}
		makesnake()
	}
	if (document.layers) {
		pageheight=window.innerHeight-30
    	pagewidth=window.innerWidth-30
		for (i=0; i<numberofimages; i++) {
    		var thisspan=eval("document.span"+i)
			thisspan.left=xpos[i]
			thisspan.top=ypos[i]
			thisspan.visibility="visible"
		}
		x_old=x
    	makesnake()
	}
}

function makesnake() {
 	if (x_old==x) {spacebetweenimgs--}
	else {spacebetweenimgs+=5}
	if (spacebetweenimgs>=30) {spacebetweenimgs=30}
	if (spacebetweenimgs<=0) {spacebetweenimgs=0}
	
	if (flag==1 && document.all) {
    	for (i=numberofimages; i>=1; i--) {
   			xpos[i]=xpos[i-1]+spacebetweenimgs
			ypos[i]=ypos[i-1]
		}
		xpos[0]=x+stepbasic
		ypos[0]=y
	
		for (i=0; i<numberofimages; i++) {
    		var thisspan = eval("span"+(i)+".style")
			if (xpos[i]>pagewidth) {xpos[i]=-2000}
			thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    	}
	}
    
    if (flag==1 && ns6) {
    	for (i=numberofimages; i>=1; i--) {
   			xpos[i]=xpos[i-1]+spacebetweenimgs
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x+stepbasic
		ypos[0]=y
	
		for (i=0; i<numberofimages; i++) {
			if (xpos[i]>pagewidth) {xpos[i]=-2000}
    		document.getElementById("span"+i).style.left=xpos[i]
			document.getElementById("span"+i).style.top=ypos[i]
    	}
	}
	
	else if (flag==1 && document.layers) {
    	for (i=numberofimages; i>=1; i--) {
   			xpos[i]=xpos[i-1]+spacebetweenimgs
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x+stepbasic
		ypos[0]=y
	
		for (i=0; i<numberofimages; i++) {
			if (xpos[i]>pagewidth) {xpos[i]=-2000}
    		var thisspan = eval("document.span"+i)
    		thisspan.left=xpos[i]
			thisspan.top=ypos[i]
    	}
	}
	x_old=x
	var timer=setTimeout("makesnake()",30)
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
window.onload=initiatetracker
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div id="span0" style="position:absolute;visibility:hidden;overflow:hidden">
  <img src="egg1.gif" width="17" height="25"></div>
<div id="span1" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg2.gif" width="17" height="25"></div>
<div id="span2" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg3.gif" width="16" height="25"></div>
<div id="span3" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg1.gif" width="17" height="25"></div>
<div id="span4" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg2.gif" width="17" height="25"></div>
<div id="span5" style="position:absolute;visibility:hidden;;overflow:hidden">

  <img src="egg3.gif" width="16" height="25"></div>
<div id="span6" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg1.gif" width="17" height="25"></div>
<div id="span7" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg2.gif" width="17" height="25"></div>
<div id="span8" style="position:absolute;visibility:hidden;;overflow:hidden">
  <img src="egg3.gif" width="16" height="25"></div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->