Splash Trailer: free JavaScript 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

Splash Trailer: free JavaScript animation
Splash Trailer is a stunning little fun JavaScript and DHTML animation that certainly will impress your visitors. Easy configuration of images and speed. Crossbrowser: Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x.

Test the script
Wait until this page has been loaded. Then move your cursor around the webpage until the animation stops. After a while all images disappear.

Configuration

Step 1
Open your webpage. Copy the following code and paste it right below the <body>-tag of your webpage.

<script>
// CREDITS:
// Splash Trailer
// By Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. 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 the Splash Tracker 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
	
///////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////

// URLs of the splash images. Replace it with your images.
var imgurl=new Array ("blue.gif","green.gif","greensmall.gif","red.gif","redsmall.gif","white.gif","yellowsmall.gif")

// maximum numbers of splash images displayed on your webpage
var max_img=200

// how long shall the images be displayed after the animation is over (seconds)
var standstill=2

// speed of animation: lower means faster
var speed=6

///////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////

var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgurl[i]
}

var isfinished=false
var range=imgurl.length
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var i_img=0
var posleft
var postop
var shownext=0
var standstill=standstill*1000

function showimages(e) {
	if (i_img<=max_img && isfinished==false) {
		if (shownext==0) {
			if (ie) {
				posleft=document.body.scrollLeft+window.event.x;
				postop=document.body.scrollTop+window.event.y;
				thisobj=eval("document.all.d"+i_img+".style")
				thisobj.visibility="visible"
				thisobj.posLeft=posleft
				thisobj.posTop=postop
			}
			if (ns6) {
				posleft=e.pageX
				postop=e.pageY
				var thisid="d"+i_img
				thisobj=document.getElementById(thisid).style
				thisobj.visibility="visible"
				thisobj.left=posleft+"px"
				thisobj.top=postop+"px"
			}
			if (ns4) {
				posleft=e.pageX
				postop=e.pageY
				thisobj=eval("document.d"+i_img)
				thisobj.visibility="visible"
				thisobj.left=posleft
				thisobj.top=postop
			}
			i_img++
			
			shownext++
		}
		else {
			shownext++
			if (shownext>speed) {shownext=0}
		}
	}
	else if (isfinished==false) {
		isfinished=true
		i_img=0
		var ti=setTimeout("clearimages()",standstill)
	}
}

function clearimages() {
	if(i_img<=max_img) {	
		if (ie) {
			thisobj=eval("document.all.d"+i_img+".style")
			thisobj.visibility="hidden"
		}
		if (ns6) {
			var thisid="d"+i_img
			thisobj=document.getElementById(thisid).style
			thisobj.visibility="hidden"
		}
		if (ns4) {
			thisobj=eval("document.d"+i_img)
			thisobj.visibility="hidden"
		}
		i_img++
		var timer=setTimeout("clearimages()",20)
	}
	else {
		clearTimeout(timer)
	}
}
	
function pageisloaded() {
	if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
	document.onmousemove=showimages
}

if (ie || ns4 || ns6) {
	window.onload=pageisloaded
}

for (i=0;i<=max_img;i++) {	
	var randimg=Math.floor(range*Math.random())
	if (ie || ns6) {
		document.write("<DIV id='d"+i+"' style='position:absolute;left:0px;top:0px;visibility:hidden'><img src='"+imgurl[randimg]+"'></div>");
	}
	if (ns4) {
		document.write("<layer name='d"+i+"' left=0 top=0 visibility=hide><img src='"+imgurl[randimg]+"'></layer>");
	}
}

document.close()	
</script>

Step 2
Go to the top of the script-code and configure the URLs and the number of your images as well as the speed of the animation.