Free JavaScript Cursor Slideshow: Fun 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 Cursor Slideshow: Fun Animation
This fun slideshow with unique lamellar transition effect will follow your cursor for ever and ever. Add as many images as you like. True copy-and-paste installation. Easy configuration. Internet Explorer 5x/6x/7x/8x, Firefox 3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Test the script
Move your mouse to see the floating effect!

Configuration:

Step 3: 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

// Set the images (URL) for your slideshow. Add as many images as you like
var slideurl=new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")

// Pause beween the slides (seconds)
var pause=2

//Do not edit below this line
var slidecomment=new Array()
slidecomment[0]=""
slidecomment[1]=""
slidecomment[2]=""
slidecomment[3]=""

var slidefont="Arial"
var slidefontcolor="black"
var slidefontsize="1"

var imgpreload=new Array
for (i=0;i<=slideurl.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=slideurl[i]
}
var x=0
var y=0
var horizontal_pos=0
var vertical_pos=0

var x_slices=6

var startpausetime
var nowpausetime
var starttime
var nowtime
var stoptime
var timetohidescroller=false
var textmovedtoleft=0

var slidewidth
var slideheight
var i_loop=0
var i_pic=0
var width_slice
var cliptop=0
var clipbottom
var i_clipright=1
var content=""
var contentful=""
pause=pause*1000

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

function openlamellar() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.all.s"+i+".style")
			thiss.posLeft=x
			thiss.posTop=y
			document.all.whole.style.posLeft=x
			document.all.whole.style.posTop=y
            thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellar()",80)
   	}
   	else {
		clearTimeout(timer)
		whole.innerHTML=contentful
		startpause()
		makepause()
	}
}

function openlamellarNS6() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=document.getElementById('s'+i).style
			thiss.left=x
			thiss.top=y
			document.getElementById('whole').style.left=x
			document.getElementById('whole').style.top=y
            thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellarNS6()",80)
   	}
   	else {
		clearTimeout(timer)
		document.getElementById('whole').innerHTML=contentful
		startpause()
		makepauseNS6()
	}
}

function makepause() {
	checkpausetime()
    if (nowpausetime<pause) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.all.s"+i+".style")
			thiss.posLeft=x
			thiss.posTop=y
			document.all.whole.style.posLeft=x
			document.all.whole.style.posTop=y
		}
    var timer=setTimeout("makepause()",80)
   	}
   	else {
		clearTimeout(timer)
		changeslideurl()
	}
}

function makepauseNS6() {
	checkpausetime()
    if (nowpausetime<pause) {
        for (i=0;i<=x_slices;i++) {
            var thiss=document.getElementById('s'+i).style
			thiss.left=x
			thiss.top=y
			document.getElementById('whole').style.left=x
			document.getElementById('whole').style.top=y
		}
    var timer=setTimeout("makepauseNS6()",80)
   	}
   	else {
		clearTimeout(timer)
		changeslideurlNS6()
	}
}

function makepauseNN() {
	checkpausetime()
    if (nowpausetime<pause) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.left=x
			thiss.top=y
			document.whole.left=x
			document.whole.top=y
		}
    var timer=setTimeout("makepauseNN()",80)
   	}
   	else {
		clearTimeout(timer)
		changeslideurlNN()
	}
}

function openlamellarNN() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.left=x
			thiss.top=y
			document.whole.left=x
			document.whole.top=y
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellarNN()",80)
   }
   	else {
		clearTimeout(timer)
		document.whole.document.write(contentful)
		document.whole.document.close()
		startpause()
		makepauseNN()
	}
}

function getcontent() {
    content="<img src='"+slideurl[i_pic]+"' border=0>"
	contentful="<img src='"+slideurl[i_pic]+"' border=0><br><font face="+slidefont+" size="+slidefontsize+" color="+slidefontcolor+">"+slidecomment[i_pic]+"</font>"
}

function changeslideurlNS6() {
	i_clipright=0
	clipleft=0
	clipright=0
	for (i=0;i<=x_slices;i++) {
		var thiss=document.getElementById('s'+i).style
    	thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
	}
	if (i_pic>slideurl.length-1) {i_pic=0}
	document.getElementById('whole').innerHTML=content
	getcontent()

for (i=0;i<=x_slices;i++) {
        var thisinners=document.getElementById('s'+i)
        thisinners.innerHTML=content   
    }
	i_pic++
	openlamellarNS6()
}

document.write("<span id='whole' class='s'></span>")
for (i=0;i<=x_slices;i++) {
 	document.write("<span id='s"+i+"' class='s'></span>")
}
document.write("<div id='emptydiv' style='position:relative'>")
document.close()
window.onload=initiate

function startnewtime() {
	starttime= new Date()
	starttime=starttime.getTime()
}

function checktime() {
	    nowtime=new Date()
	    nowtime=nowtime.getTime()
        nowtime=(nowtime-starttime)/1000
		if (nowtime>stoptime) {timetohidescroller=true}
}

function startpause() {
	startpausetime=new Date()
	startpausetime=startpausetime.getTime()
}

function checkpausetime() {
	    nowpausetime=new Date()
	    nowpausetime=nowpausetime.getTime()
        nowpausetime=nowpausetime-startpausetime
}

function hidescroller() {
    if (ie) {
		document.all.bgscroller.style.visibility="hidden"
		document.all.text.style.visibility="hidden"
    }
	if (ns6) {
		document.getElementById('bgscroller').style.visibility="hidden"
		document.getElementById('text').style.visibility="hidden"
    }
	if (ns4) {
		document.bgscroller.visibility="hidden"
		document.text.visibility="hidden"
    }
}

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

}

if (ns4){
	document.captureEvents(Event.MOUSEMOVE);
}

if (ie || ns4 || ns6) {
	document.onmousemove=handlerMM;
}
</script>

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

Step 2: Open your webpage and configure the pictures and the speed (red code below) on top of the script:

// Set the images (URL) for your slideshow. Add as many images as you like
var picture=new Array("pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg")

// Pause beween the slideurls (seconds)
var pause=2