<!-- BEGINNING OF THE CODE FOR THE SLIDESHOW -->

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<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>
<!----------------------------------------->
<!-- STYLE-CONFIGURATION ENDS HERE -->
<!----------------------------------------->

<script>
// CREDITS:
// Slideshow with distortion effect by cursor
// by Peter Gehrig 
// Copyright (c) 2011 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 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>

<!-- END OF THE CODE FOR THE SLIDESHOW -->

http://www.fabulant.com/downloadcenter/imgdistortioncursor/imgdistortioncursor.html

What's so special about this JavaScript slideshow? By moving your cursor all over the webpage you create a nice distortion effect on your images.

Slideshow with cursor controlled distortion effect

javascript, image, animation

JavaScript