Fun of JavaSvript: slideshow with cursor controlled distortion effect

» 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

Slideshow with cursor controlled distortion effect
What's so special about this fun JavaScript slideshow? By moving your cursor all over the webpage you create a stunning distortion effect! You may add as many pictures as you like. Each each image can be commented - and each comment can be linked. Most style-attributes can be set by CSS. True copy&paste installation. Internet Explorer 6x/7x/8x/9x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x/9x.

Test the script
Just move your mouse and you will see it ...

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

<style>

/* Set the horizontal alignement, background-color, transparency and padding for the comment-box */
.textboxstyle {
	text-align:center;
	background-color:#666666;
	opacity:0.6; /* Set the transparency for Firefox, Opera and Google Chrome */
	padding:3px;
	filter:alpha(opacity=60); /* Set the transparency for Internet Explorer */
}

/* Set the border and shadow around the slideshow */
.borderandshadowstyle {
	/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 8px #818181;

/* shadow for Safari and Chrome */
	-webkit-box-shadow: 5px 5px 8px #818181;

/* shadow for Opera */
	box-shadow: 5px 5px 5px #818181;

/* border for all browsers */
	border-style:solid;
	border-width:1px;
	border-color:white;
	
	/* shadow for Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');
}

/* Set the vertical alignement for the comment-box (bottom, middle or top) */
.textverticalposition {
	vertical-align:bottom;
}

/* Set the font-attributes for the comment-box */
a.textstyle {
	font-family: Arial;
	font-size:9pt;
	font-weight:normal;
	color:white;
	text-decoration:none;
}

</style>

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

var imgsrc=new Array()
var comment=new Array()
var linkurl=new Array()

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

// The URLs of your images. Add as many images as you like
imgsrc[0]="clock1.jpg"
imgsrc[1]="clock2.jpg"
imgsrc[2]="clock3.jpg"

// Each image requires a comment (can be empty)
comment[0]="Radio controlled clock"
comment[1]="Wake up news alarm."
comment[2]="Contemporary clocks."

// Each comment requires a link
// Add "#" if you don't want to add a link.
linkurl[0]="http://www.creativewatch.co.uk/office-clocks.php"
linkurl[1]="http://www.wakeupnews.com"
linkurl[2]="http://contemporaryclocks.org/battery-alarm-clock/"

// width of the images (pixels)
var img_width=300

// height of the images (pixels)
var img_height=300

// pause (seconds)
var pause=3

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

// do not edit below this line
var imgwidthA
var imgheightA
var imgwidthB
var imgheightB
var imgwidthC
var imgheightC
var imgwidthD
var imgheightD
var i_img=0
var x=0
var y=0
var doc_height
var doc_width
var clipleft
var clipright
var cliptop
var clipbottom
var shrinkfactor_width
var shrinkfactor_height
var counimgtimer
var i_loop=0
pause=Math.floor(1000*pause/30)

var imgpreload=new Array()
for (ii=0;ii<=imgsrc.length;ii++) {
	imgpreload[ii]=new Image()
	imgpreload[ii].src=imgsrc[ii]
}

function initiate() {
    doc_height=document.body.clientHeight
    doc_width=document.body.clientWidth
	shrinkfactor_width=doc_width/img_width
	shrinkfactor_height=doc_height/img_height
	document.onmousemove = handlerMM;
	x=doc_width/2
	y=doc_height/2
	document.getElementById('textcontainer').innerHTML="<a class='textstyle'  href='"+linkurl[i_img]+"' target='_top'>"+comment[i_img]+"</a>"
	newpos()	
}

function newpos() {
	imgwidthA=2*(x/shrinkfactor_width)
	imgheightA=2*(y/shrinkfactor_height)
	imgwidthB=2*img_width-imgwidthA
	imgheightB=imgheightA
	imgwidthC=imgwidthA
	imgheightC=2*img_height-imgheightA
	imgwidthD=2*img_width-imgwidthA
	imgheightD=2*img_height-imgheightA
	document.getElementById('imageA').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthA+" height="+imgheightA+">"
	document.getElementById('imageB').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthB+" height="+imgheightB+">"
	document.getElementById('imageC').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthC+" height="+imgheightC+">"
	document.getElementById('imageD').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthD+" height="+imgheightD+">"
		
	document.getElementById('imageA').style.left=0+"px"
    document.getElementById('imageA').style.top=0+"px"
	clipleft=0
	clipright=Math.floor(imgwidthA/2)
	cliptop=0
	clipbottom=imgheightA/2
	document.getElementById('imageA').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
		
	document.getElementById('imageB').style.left=Math.floor((imgwidthA/2-imgwidthB/2))+"px"
    document.getElementById('imageB').style.top=0+"px"
	clipleft=Math.floor(imgwidthB/2)
	clipright=imgwidthB
	cliptop=0
	clipbottom=Math.floor(imgheightB/2)
	document.getElementById('imageB').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
		
	document.getElementById('imageC').style.left=0+"px"
    document.getElementById('imageC').style.top=Math.floor(imgheightA/2-imgheightC/2)+"px"
	clipleft=0
	clipright=Math.floor(imgwidthC/2)
	cliptop=Math.floor(imgheightC/2)
	clipbottom=imgheightC
	document.getElementById('imageC').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
		
	document.getElementById('imageD').style.left=Math.floor(imgwidthA/2-imgwidthB/2)+"px"
    document.getElementById('imageD').style.top=Math.floor(imgheightA/2-imgheightC/2)+"px"
	clipleft=Math.floor(imgwidthD/2)
	clipright=imgwidthD
	cliptop=Math.floor(imgheightD/2)
	clipbottom=imgheightD
	document.getElementById('imageD').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	i_loop++
	if (i_loop>=pause) {
		i_img++
		if (i_img>=imgsrc.length) {
			i_img=0;
		}
		document.getElementById('textcontainer').innerHTML="<a class='textstyle'  href='"+linkurl[i_img]+"' target='_top'>"+comment[i_img]+"</a>"
		i_loop=0
	}
	var timer=setTimeout("newpos()",30)
}

function handlerMM(e){
	if (document.all) {
		x=document.body.scrollLeft+event.clientX
		y=document.body.scrollTop+event.clientY
	}
	else {
		x=e.pageX
		y=e.pageY
	}
}

document.write('<DIV ID="roof" class="borderandshadowstyle" style="position:relative;width:'+img_width+'px;height:'+img_height+'px;overflow:hidden">')
document.write('<DIV ID="imageA" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
document.write('<DIV ID="imageB" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
document.write('<DIV ID="imageC" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
document.write('<DIV ID="imageD" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
document.write('<DIV  style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;overflow:hidden"><table cellpadding=0 cellspacing=0 width='+img_width+' height='+img_height+'><tr><td class="textverticalposition"><div id="textcontainer" class="textboxstyle" style="width:'+img_width+'px;"></div></td></tr></table></DIV>')
document.write('</DIV>')

window.onload=initiate

</script>

Step 2: Go inside the <style>-tags and configure the style of comments according to the instructions.
Step 3: Go on the top of the script and configure the URLs of images, width, height, comments, links and speed of the slideshow.