dhteumeuleu » the difference

the difference

On February 13, 2010, in demo, by ge1doot music:

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/car-3D-img.html
digital images: oliver ottner: www.naturemorphosis.com
updated: February 2010: implemented flipv / fliph on non-IE browsers

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>the difference - interactive DHTML</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position:absolute; 
		left: 00%; 
		top: 0%; 
		width: 100%; 
		height: 100%; 
		background: #000; 
		overflow: hidden; 
	} 
	#screen img { 
		position: absolute; 
		cursor: pointer; 
		left: -4000px; 
		filter: fliph flipv; 
		-ms-interpolation-mode:nearest-neighbor; 
	} 
	#screen canvas { 
		position: absolute; 
		cursor: pointer; 
		width: 0px; 
	} 
	#credit { 
		position: absolute; 
		color: #888; 
		font-family: verdana, arial, helvetica, sans-serif; 
		font-size: 0.8em; 
		right: 1em; 
		text-align: right; 
		bottom: 2px; 
	} 
	#b1 { 
		position:absolute; 
		width:100%; 
		height:10%;background:#FFF; 
	} 
	#b2 { 
		position:absolute; 
		width:100%; 
		height:10%; 
		background:#FFF; 
		bottom:0px; 
	} 
	a {text-decoration: none;color:#333;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#333;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
</style> 
 
 
<script type="text/javascript"> 
// ================================================== 
//        ===== images 3D carousel ==== 
// script written by Gerard Ferrandez - February 2007 
// http://www.dhteumeuleu.com 
// GFX oliver ottner: http://www.naturemorphosis.com/ 
// updated: February 2010 - CANVAS flipv / fliph 
// updated: January  2011 - IE9 compatibility 
// ================================================== 
 
 
var car = { 
	scr  : 0, 
	img  : 0, 
	xm   : 0, 
	ym   : 0, 
	xmb  : 0, 
	ymb  : 0, 
	drag : false, 
	cosY : 0, 
	cosX : 0, 
	sinY : 0, 
	sinX : 0, 
	xd   : 0, 
	yd   : -10, 
 
	run : function () { 
		/* ==== rotation speed ==== */ 
		var Ay = car.xd / (car.scr.offsetWidth * .2); 
		var Ax = car.yd / (car.scr.offsetHeight * .2); 
		/* ==== vertical / horizontal friction ==== */ 
		if(!car.drag){ 
			if(Math.abs(car.xd) > Math.abs(car.yd)){ 
				car.xd *= .99; 
				car.yd *= .95; 
			} else { 
				car.xd *= .95; 
				car.yd *= .99; 
			} 
		} 
		/* ==== rotation angles ==== */ 
		car.cosY = Math.cos(Ay); 
		car.cosX = Math.cos(Ax); 
		car.sinY = Math.sin(Ay); 
		car.sinX = Math.sin(Ax); 
		/* ==== animate images ==== */ 
		for(var i = 0; i < 8; i++) car.img[i].rotate(); 
		/* ==== loop ==== */ 
		setTimeout(car.run, 16); 
	}, 
 
	/* ==== mouse mov ==== */ 
	mouse : function (e) { 
		this.xm = e.clientX; 
		this.ym = -e.clientY; 
		if(this.drag){ 
			this.xd = this.xm - this.xmb; 
			this.yd = this.ym - this.ymb; 
		} 
		this.xmb = this.xm; 
		this.ymb = this.ym; 
	}, 
 
	/* ==== dim screen ==== */ 
	resize : function () { 
		car.nw = car.scr.offsetWidth; 
		car.nh = car.scr.offsetHeight; 
	}, 
 
	/* ==== init script ==== */ 
	init : function () { 
		/* ==== window mousemove event ==== */ 
		document.onmousemove = function (e) { 
			if (window.event) e = window.event; 
			car.mouse(e); 
		} 
		/* ==== window onresize event ==== */ 
		onresize = car.resize; 
		/* ==== init images ==== */ 
		this.scr = document.getElementById('screen'); 
		var img = this.scr.getElementsByTagName('img'); 
		this.img = []; 
		car.resize(); 
		var k = 0; 
		for(var xi = -1; xi <= 1; xi+=2) { 
			for(var yi = -1; yi <= 1; yi+=2) { 
				for(var zi = -1; zi <= 1; zi+=2) { 
					var o = img[k++]; 
					/* ==== replace images by canvas ==== */ 
					if (document.createElement("canvas").getContext) { 
						var src = o; 
						o = document.createElement("canvas"); 
						o.canvas = true; 
						/* ==== flip function ==== */ 
						o.flip = function (fx, fy) { 
							var context = this.getContext("2d"); 
							context.translate(fx<0?this.w:0, fy<0?this.h:0); 
							context.scale(fx, fy); 
							context.drawImage(this.img, 0, 0, this.w, this.h); 
						} 
						o.img = src; 
						this.scr.appendChild(o); 
					} 
					/* ==== HTML Objects ==== */ 
					this.img.push(o); 
					o.css = o.style; 
					o.x3d = xi; 
					o.y3d = yi; 
					o.z3d = zi; 
					o.py  = 0; 
					o.px  = 0; 
					o.onselectstart = function () { return false; } 
					o.ondrag        = function () { return false; } 
					o.onmousedown   = function () { 
						car.drag = true; 
						car.xd = 0; 
						car.yd = 0; 
						this.css.cursor = "move"; 
						return false; 
					} 
					o.onmouseout    = function () {car.drag = false; this.css.cursor = "pointer"; return false; } 
					o.onmouseup     = function () {car.drag = false; this.css.cursor = "pointer"; return false; } 
					o.rotate        = function () { 
						/* ==== trigo ==== */ 
						var tz   = this.z3d * car.cosY - this.x3d * car.sinY; 
						this.x3d = this.z3d * car.sinY + this.x3d * car.cosY; 
						this.z3d = this.y3d * car.sinX + tz * car.cosX; 
						this.y3d = this.y3d * car.cosX - tz * car.sinX; 
						var zf   = 1 / (this.z3d / 10 + 1); 
						var x2d  = this.x3d * zf * car.nw * .2; 
						var y2d  = this.y3d * zf * car.nh * .2; 
						var w2d  = Math.abs(x2d * 1.6); 
						var h2d  = Math.abs(y2d * 1.6); 
						if (this.loaded) { 
							/* ==== HTML animation ==== */ 
							this.css.left   = Math.round(car.nw * .5 - x2d - w2d * .5) + 'px'; 
							this.css.top    = Math.round(car.nh * .5 - y2d - h2d * .5) + 'px'; 
							this.css.width  = Math.round(w2d) + 'px'; 
							this.css.height = Math.round(h2d) + 'px'; 
							this.css.zIndex = Math.round(zf * 100); 
							/* ==== flipv ==== */ 
							if ((y2d < 0) != this.py) { 
								this.py = (y2d < 0); 
								if (this.canvas) 
									this.flip(1, -1); 
								else if (this.filters) 
									this.filters[1].enabled = (y2d < 0) ? "true" : "false"; 
							} 
							/* ==== fliph ==== */ 
							if ((x2d < 0) != this.px) { 
								this.px = (x2d < 0); 
								if (this.canvas) 
									this.flip(-1, 1); 
								else if (this.filters) 
									this.filters[0].enabled = (x2d < 0) ? "true" : "false"; 
							} 
						} else { 
							/* ==== load image ==== */ 
							if ((this.canvas && this.img.complete) || this.complete) { 
								this.loaded = true; 
								if (this.canvas) { 
									this.w = this.img.width; 
									this.h = this.img.height; 
									this.width = this.w; 
									this.height = this.h; 
									var context = this.getContext("2d"); 
									context.drawImage(this.img, 0, 0, this.w, this.h); 
								} 
							} 
						} 
					} 
				} 
			} 
		} 
		this.run(); 
	} 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
	<div id="b1"></div> 
	<div id="b2"></div> 
	<img alt="" src="../images/nm14.jpg"> 
	<img alt="" src="../images/nm15.jpg"> 
	<img alt="" src="../images/nm06.jpg"> 
	<img alt="" src="../images/nm12.jpg"> 
	<img alt="" src="../images/nm12.jpg"> 
	<img alt="" src="../images/nm06.jpg"> 
	<img alt="" src="../images/nm15.jpg"> 
	<img alt="" src="../images/nm14.jpg"> 
	<div id="credit">script by <a target=_blank href="http://www.dhteumeuleu.com/">wwww.dhteumeuleu.com</a>   -   digital images © oliver ottner: <a target=_blank href="http://www.naturemorphosis.com/">www.naturemorphosis.com</a></div> 
</div> 
 
<script type="text/javascript"> 
	/* ==== start ==== */ 
	setTimeout(function() { 
		car.init(); 
	}, 1000); 
</script> 
 
</body> 
</html>

Tagged with: 3D • canvas • diapo