Free JavaScript: CSS3 slideshow with slow rotation-zoom 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

CSS3 Slideshow with zoom-rotation effec: SLOW VERSION
This free copy and paste JavaScript adds a unique CSS3 rotation and zoom effect to your slideshow. Each slide can be linked and commented. The special effects are supported by CSS-ready browsers (FF3.6+, Safari 4+, Google Chrome 4+, Opera 10.5+). All other browsers will display a nice zoom-in zoom-out slideshow without rotation effect.

Configuration:

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

<style>
.textboxstyle {
font-family:Arial;
font-size:10pt;
color:white;
text-align:center;
vertical-align:middle;
}

.textboxbackgroundstyle {
background-color:black;
padding:0px;
}
</style>

// CREDITS:
// CSS3-Slideshow with rotation and zoom effect effect
// by Peter Gehrig 
// Copyright (c) 2012 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
// 02/10/2010

// 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 this script will be running.

// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code 
// with step-by-step instructions and copy-and-paste installation.

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

// Set the elements of your slides. Each block below contains the URL of your images as well as the corresponding messages and links. In this case the pictures are in the same directory as the HTML-file. Add as many slides as you like. Just follow the rules below:

// { Each block starts with this brackets
// imgsrc : "../the path/or/url/to/your/image.jpg",
// message : "the comment at the bottom of the slide",
// linkto : "http://the-url-of-your-link.com" This line does not end with a comma
//}, Each block ends with a bracket and comma. ATTENTION: The very last block does not end with a comma!!!

var slide= [
{
imgsrc : "sample1.jpg",
message : "That's the smile of Mona Lisa",
linkto : "http://www.fabulant.com"
},

{
imgsrc : "sample2.jpg",
message : "Lena looks like an angel",
linkto : "http://www.fabulant.com"
},

{
imgsrc: "sample3.jpg",
message : "Most women are waterproof",
linkto : "http://www.fabulant.com"
},

{
imgsrc : "sample4.jpg",
message : "Beauty has no age",
linkto : "http://www.fabulant.com"
}
]

// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"

// Set the width and height of your images (pixels)
var imgwidth=200
var imgheight=150

// Set the height of your textbox (pixels)
var textheight=20

// Set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60

// Set the pause (standstill) between the rotations (seconds)
var pause=2

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////

// do not edit below this line
var maxrotations=1
var step=3
var i_imgwidth=0
var i_imgsrc=0
var i=0
var maxdegree=maxrotations*360
pause*=1000

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

function enlarge() {
	i+=step
	i_imgwidth+=imgwidth/(360*maxrotations/step)
	if (i_imgwidth>imgwidth) {
		i_imgwidth=imgwidth
	}
	if (i<=maxdegree) {
		document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
		document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
		tmr=setTimeout("enlarge()",20)
	}
	else {
		clearTimeout(tmr)
		i=0
		i_imgwidth=imgwidth
		showmessage()
	}
}

function showmessage() {
	document.getElementById("textbox").innerHTML='<div class="textboxbackgroundstyle">'+slide[i_imgsrc].message+'</div>'
	tmr=setTimeout("hidemessage()",pause)
}

function hidemessage() {
	document.getElementById("textbox").innerHTML=""
	shrink()
}

function shrink() {
	i+=step
	i_imgwidth-=imgwidth/(360*maxrotations/step)
	if (i_imgwidth<1) {
		i_imgwidth=1
	}
	if (i<=maxdegree) {
		document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
		document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
		document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
		tmr=setTimeout("shrink()",20)
	}
	else {
		clearTimeout(tmr)
		i_imgsrc++
		if (i_imgsrc>slide.length-1) {
			i_imgsrc=0
		}
		i=0
		i_imgwidth=0
		tmr=setTimeout("enlarge()",500)
	}
}

document.write("<div id='roof' style='position:relative;width:"+imgwidth+"px;height:"+imgheight+"px;'>")
document.write("<div class='imgbox' id='dt' style='width:"+imgwidth+"px;height:"+imgheight+"px;top:0px;left:0px;'></div>")
document.write("<div id='text'  style='position:absolute;width:"+imgwidth+"px;height:"+textheight+"px;top:"+(imgheight-textheight)+"px;left:0px;filter:alpha(opacity="+opacitystrength+");opacity:"+(opacitystrength/100)+";'><table width="+imgwidth+" height="+textheight+"><tr><td id='textbox' class='textboxstyle'></td></tr></table></div>")

document.write("</div>")

window.onload=enlarge
</script>

Step 2: Go inside the <style>-tags and configure the text-style.

Step 3: Go to the lines below the <script>-tag and configure the slides (URL of images, messages, links), width, height and the opacity of the slideshow.