Advanced Search

Slideshow with cursor controlled distortion effect

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- BEGINNING OF THE CODE FOR THE SLIDESHOW -->
  2.  
  3. <!----------------------------------------->
  4. <!-- STYLE-CONFIGURATION STARTS HERE -->
  5. <!----------------------------------------->
  6. <style>
  7.  
  8. /* Set the horizontal alignement, background-color, transparency and padding for the comment-box */
  9. .textboxstyle {
  10. 	text-align:center;
  11. 	background-color:#666666;
  12. 	opacity:0.6; /* Set the transparency for Firefox, Opera and Google Chrome */
  13. 	padding:3px;
  14. 	filter:alpha(opacity=60); /* Set the transparency for Internet Explorer */
  15. }
  16.  
  17. /* Set the border and shadow around the slideshow */
  18. .borderandshadowstyle {
  19. 	/* shadow for Firefox */
  20. 	-moz-box-shadow: 5px 5px 8px #818181;
  21.  
  22. 	/* shadow for Safari and Chrome */
  23. 	-webkit-box-shadow: 5px 5px 8px #818181;
  24.  
  25. 	/* shadow for Opera */
  26. 	box-shadow: 5px 5px 5px #818181;
  27.  
  28. 	/* border for all browsers */
  29. 	border-style:solid;
  30. 	border-width:1px;
  31. 	border-color:white;
  32.  
  33. 	/* shadow for Internet Explorer */
  34. 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');
  35. }
  36.  
  37. /* Set the vertical alignement for the comment-box (bottom, middle or top) */
  38. .textverticalposition {
  39. 	vertical-align:bottom;
  40. }
  41.  
  42. /* Set the font-attributes for the comment-box */
  43. a.textstyle {
  44. 	font-family: Arial;
  45. 	font-size:9pt;
  46. 	font-weight:normal;
  47. 	color:white;
  48. 	text-decoration:none;
  49. }
  50.  
  51. </style>
  52. <!----------------------------------------->
  53. <!-- STYLE-CONFIGURATION ENDS HERE -->
  54. <!----------------------------------------->
  55.  
  56. <script>
  57. // CREDITS:
  58. // Slideshow with distortion effect by cursor
  59. // by Peter Gehrig 
  60. // Copyright (c) 2011 Peter Gehrig. All rights reserved.
  61. // Permission given to use the script provided that this notice remains as is.
  62. // Additional scripts can be found at http://www.fabulant.com.
  63.  
  64. // IMPORTANT: 
  65. // If you add this script to a script-library or script-archive 
  66. // you have to add a link to http://www.fabulant.com on the webpage 
  67. // where the script will be running.
  68.  
  69. var imgsrc=new Array()
  70. var comment=new Array()
  71. var linkurl=new Array()
  72.  
  73. /////////////////////////////////////////////////
  74. // SCRIPT-CONFIGURATION STARTS HERE
  75. /////////////////////////////////////////////////
  76.  
  77. // The URLs of your images. Add as many images as you like
  78. imgsrc[0]="clock1.jpg"
  79. imgsrc[1]="clock2.jpg"
  80. imgsrc[2]="clock3.jpg"
  81.  
  82. // Each image requires a comment (can be empty)
  83. comment[0]="Radio controlled clock"
  84. comment[1]="Wake up news alarm."
  85. comment[2]="Contemporary clocks."
  86.  
  87. // Each comment requires a link
  88. // Add "#" if you don't want to add a link.
  89. linkurl[0]="http://www.creativewatch.co.uk/office-clocks.php"
  90. linkurl[1]="http://www.wakeupnews.com"
  91. linkurl[2]="http://contemporaryclocks.org/battery-alarm-clock/"
  92.  
  93. // width of the images (pixels)
  94. var img_width=300
  95.  
  96. // height of the images (pixels)
  97. var img_height=300
  98.  
  99. // pause (seconds)
  100. var pause=3
  101.  
  102. /////////////////////////////////////////////////
  103. // SCRIPT-CONFIGURATION ENDS HERE
  104. /////////////////////////////////////////////////
  105.  
  106. // do not edit below this line
  107. var imgwidthA
  108. var imgheightA
  109. var imgwidthB
  110. var imgheightB
  111. var imgwidthC
  112. var imgheightC
  113. var imgwidthD
  114. var imgheightD
  115. var i_img=0
  116. var x=0
  117. var y=0
  118. var doc_height
  119. var doc_width
  120. var clipleft
  121. var clipright
  122. var cliptop
  123. var clipbottom
  124. var shrinkfactor_width
  125. var shrinkfactor_height
  126. var counimgtimer
  127. var i_loop=0
  128. pause=Math.floor(1000*pause/30)
  129.  
  130. var imgpreload=new Array()
  131. for (ii=0;ii<=imgsrc.length;ii++) {
  132. 	imgpreload[ii]=new Image()
  133. 	imgpreload[ii].src=imgsrc[ii]
  134. }
  135.  
  136. function initiate() {
  137.     doc_height=document.body.clientHeight
  138.     doc_width=document.body.clientWidth
  139. 	shrinkfactor_width=doc_width/img_width
  140. 	shrinkfactor_height=doc_height/img_height
  141. 	document.onmousemove = handlerMM;
  142. 	x=doc_width/2
  143. 	y=doc_height/2
  144. 	document.getElementById('textcontainer').innerHTML="<a class='textstyle'  href='"+linkurl[i_img]+"' target='_top'>"+comment[i_img]+"</a>"
  145. 	newpos()	
  146. }
  147.  
  148. function newpos() {
  149. 	imgwidthA=2*(x/shrinkfactor_width)
  150. 	imgheightA=2*(y/shrinkfactor_height)
  151. 	imgwidthB=2*img_width-imgwidthA
  152. 	imgheightB=imgheightA
  153. 	imgwidthC=imgwidthA
  154. 	imgheightC=2*img_height-imgheightA
  155. 	imgwidthD=2*img_width-imgwidthA
  156. 	imgheightD=2*img_height-imgheightA
  157. 	document.getElementById('imageA').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthA+" height="+imgheightA+">"
  158. 	document.getElementById('imageB').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthB+" height="+imgheightB+">"
  159. 	document.getElementById('imageC').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthC+" height="+imgheightC+">"
  160. 	document.getElementById('imageD').innerHTML="<img src="+imgsrc[i_img]+" width="+imgwidthD+" height="+imgheightD+">"
  161.  
  162. 	document.getElementById('imageA').style.left=0+"px"
  163.     document.getElementById('imageA').style.top=0+"px"
  164. 	clipleft=0
  165. 	clipright=Math.floor(imgwidthA/2)
  166. 	cliptop=0
  167. 	clipbottom=imgheightA/2
  168. 	document.getElementById('imageA').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
  169.  
  170. 	document.getElementById('imageB').style.left=Math.floor((imgwidthA/2-imgwidthB/2))+"px"
  171.     document.getElementById('imageB').style.top=0+"px"
  172. 	clipleft=Math.floor(imgwidthB/2)
  173. 	clipright=imgwidthB
  174. 	cliptop=0
  175. 	clipbottom=Math.floor(imgheightB/2)
  176. 	document.getElementById('imageB').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
  177.  
  178. 	document.getElementById('imageC').style.left=0+"px"
  179.     document.getElementById('imageC').style.top=Math.floor(imgheightA/2-imgheightC/2)+"px"
  180. 	clipleft=0
  181. 	clipright=Math.floor(imgwidthC/2)
  182. 	cliptop=Math.floor(imgheightC/2)
  183. 	clipbottom=imgheightC
  184. 	document.getElementById('imageC').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
  185.  
  186. 	document.getElementById('imageD').style.left=Math.floor(imgwidthA/2-imgwidthB/2)+"px"
  187.     document.getElementById('imageD').style.top=Math.floor(imgheightA/2-imgheightC/2)+"px"
  188. 	clipleft=Math.floor(imgwidthD/2)
  189. 	clipright=imgwidthD
  190. 	cliptop=Math.floor(imgheightD/2)
  191. 	clipbottom=imgheightD
  192. 	document.getElementById('imageD').style.clip="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
  193. 	i_loop++
  194. 	if (i_loop>=pause) {
  195. 		i_img++
  196. 		if (i_img>=imgsrc.length) {
  197. 			i_img=0;
  198. 		}
  199. 		document.getElementById('textcontainer').innerHTML="<a class='textstyle'  href='"+linkurl[i_img]+"' target='_top'>"+comment[i_img]+"</a>"
  200. 		i_loop=0
  201. 	}
  202. 	var timer=setTimeout("newpos()",30)
  203. }
  204.  
  205. function handlerMM(e){
  206. 	if (document.all) {
  207. 		x=document.body.scrollLeft+event.clientX
  208. 		y=document.body.scrollTop+event.clientY
  209. 	}
  210. 	else {
  211. 		x=e.pageX
  212. 		y=e.pageY
  213. 	}
  214. }
  215.  
  216. document.write('<DIV ID="roof" class="borderandshadowstyle" style="position:relative;width:'+img_width+'px;height:'+img_height+'px;overflow:hidden">')
  217. document.write('<DIV ID="imageA" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
  218. document.write('<DIV ID="imageB" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
  219. document.write('<DIV ID="imageC" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
  220. document.write('<DIV ID="imageD" style="position:absolute;top:0px;left:0px;width:'+img_width+'px;height:'+img_height+'px;"></DIV>')
  221. 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>')
  222. document.write('</DIV>')
  223.  
  224. window.onload=initiate
  225.  
  226. </script>
  227.  
  228. <!-- END OF THE CODE FOR THE SLIDESHOW -->

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.