dhteumeuleu » wanna tell her

wanna tell her

On January 1, 2009, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/photo3D-2.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Wanna tell her - 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 { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #fff; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		left: 10%; 
		top: 10%; 
		width: 80%; 
		height: 80%; 
		background: #fff; 
	} 
	#screen img { 
		position: absolute; 
		cursor: pointer; 
		width: 0px; 
		height: 0px; 
		-ms-interpolation-mode:nearest-neighbor; 
	} 
	#bankImages { 
		visibility: hidden; 
	} 
	#FPS { 
		position: absolute; 
		right: 5px; 
		bottom: 5px; 
		font-size: 10px; 
		color: #666; 
		font-family: verdana; 
	} 
 
</style> 
 
<script type="text/javascript"> 
// ============================================================= 
//           ===== photo 3D experiment II ===== 
// script written by Gerard Ferrandez - January 3, 2009 
// http://www.dhteumeuleu.com 
// ============================================================= 
 
/* ==== Easing function ==== */ 
var Library = {}; 
Library.ease = function () { 
	this.target = 0; 
	this.position = 0; 
	this.move = function (target, speed) { 
		this.position += (target - this.position) * speed; 
	} 
} 
 
var tv = { 
	/* ==== variables ==== */ 
	O : [], 
	fps : 0, 
	screen : {}, 
	angle : { 
		x : new Library.ease(), 
		y : new Library.ease() 
	}, 
	camera : { 
		x    : new Library.ease(), 
		y    : new Library.ease() 
	}, 
	create3DHTML : function (i, x, y, z, sw, sh) { 
		/* ==== create HTML image element ==== */ 
		var o = document.createElement('img'); 
		o.src = i.src; 
		tv.screen.obj.appendChild(o); 
		/* ==== 3D coordinates ==== */ 
		o.point3D = { 
			x  : x, 
			y  : y, 
			z  : new Library.ease(), 
			sw : sw, 
			sh : sh, 
			w  : i.width, 
			h  : i.height 
		}; 
		o.point3D.z.target = z; 
		/* ==== push object ==== */ 
		o.point2D = {}; 
		tv.O.push(o); 
 
		/* ==== on mouse over event ==== */ 
		o.onmouseover = function () { 
			if (this != tv.o) { 
				this.point3D.z.target = tv.mouseZ; 
				tv.camera.x.target = this.point3D.x; 
				tv.camera.y.target = this.point3D.y; 
				if (tv.o) tv.o.point3D.z.target = 0; 
				tv.o = this; 
			} 
			return false; 
		} 
 
		/* ==== on mousedown event ==== */ 
		o.onmousedown = function () { 
			if (this == tv.o) { 
				if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0; 
				else { 
					tv.o = false; 
					this.onmouseover(); 
				} 
			} 
		} 
 
		/* ==== main 3D function ==== */ 
		o.animate = function () { 
			/* ==== 3D coordinates ==== */ 
			var x = this.point3D.x - tv.camera.x.position; 
			var y = this.point3D.y - tv.camera.y.position; 
			this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08); 
			/* ==== rotations ==== */ 
			var xy = tv.angle.cx * y  - tv.angle.sx * this.point3D.z.position; 
			var xz = tv.angle.sx * y  + tv.angle.cx * this.point3D.z.position; 
			var yz = tv.angle.cy * xz - tv.angle.sy * x; 
			var yx = tv.angle.sy * xz + tv.angle.cy * x; 
			/* ==== 2D transform ==== */ 
			var scale = tv.camera.focalLength / (tv.camera.focalLength + yz); 
			x = yx * scale; 
			y = xy * scale; 
			var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw)); 
			var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh)); 
			/* ==== HTML rendering ==== */ 
			var o    = this.style; 
			o.left   = Math.round(x + tv.screen.w - w * .5) + 'px'; 
			o.top    = Math.round(y + tv.screen.h - h * .5) + 'px'; 
			o.width  = w + 'px'; 
			o.height = h + 'px'; 
			o.zIndex = 10000 + Math.round(scale * 1000); 
		} 
	}, 
 
	/* ==== init script ==== */ 
	init : function (structure, FL, mouseZ, rx, ry) { 
		this.screen.obj = document.getElementById('screen'); 
		this.screen.obj.onselectstart = function () { return false; } 
		this.screen.obj.ondrag        = function () { return false; } 
		this.mouseZ = mouseZ; 
		this.camera.focalLength = FL; 
		this.angle.rx = rx; 
		this.angle.ry = ry; 
		/* ==== create objects ==== */ 
		var i = 0, o; 
		while( o = structure[i++] ) 
			this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh); 
		/* ==== start script ==== */ 
		this.resize(); 
		mouse.y = this.screen.y + this.screen.h; 
		mouse.x = this.screen.x + this.screen.w; 
		/* ==== loop ==== */ 
		setInterval(tv.run, 16); 
		setInterval(tv.dFPS, 1000); 
	}, 
 
	/* ==== resize window ==== */ 
	resize : function () { 
		var o = tv.screen.obj; 
		if (o) { 
			tv.screen.w = o.offsetWidth / 2; 
			tv.screen.h = o.offsetHeight / 2; 
			for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) { 
				tv.screen.x += o.offsetLeft; 
				tv.screen.y += o.offsetTop; 
			} 
		} 
	}, 
 
	/* ==== main loop ==== */ 
	run : function () { 
		tv.fps++; 
		/* ==== motion ease ==== */ 
		tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1); 
		tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1); 
		tv.camera.x.move(tv.camera.x.target, .025); 
		tv.camera.y.move(tv.camera.y.target, .025); 
		/* ==== angles sin and cos ==== */ 
		tv.angle.cx = Math.cos(tv.angle.x.position); 
		tv.angle.sx = Math.sin(tv.angle.x.position); 
		tv.angle.cy = Math.cos(tv.angle.y.position); 
		tv.angle.sy = Math.sin(tv.angle.y.position); 
		/* ==== loop through images ==== */ 
		var i = 0, o; 
		while( o = tv.O[i++] ) o.animate(); 
	}, 
 
	/* ==== trace frames per seconds ==== */ 
	dFPS : function () { 
		document.getElementById('FPS').innerHTML = tv.fps + ' FPS'; 
		tv.fps = 0; 
	} 
} 
 
/* ==== global mouse position ==== */ 
var mouse = { 
	x : 0, 
	y : 0 
} 
document.onmousemove = function(e) { 
	if (window.event) e = window.event; 
	mouse.x = e.clientX; 
	mouse.y = e.clientY; 
	return false; 
} 
 
/* ==== starting script ==== */ 
onload = function() { 
	onresize = tv.resize; 
	/* ==== build grid ==== */ 
	var img = document.getElementById('bankImages').getElementsByTagName('img'); 
	var structure = []; 
	for (var i = -300; i <= 300; i += 120) 
		for (var j = -300; j <= 300; j += 120) 
			structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 }); 
	/* ==== let's go ==== */ 
	tv.init(structure, 350, -200, .005, .0025); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"></div> 
 
<div id="bankImages"> 
	<img alt="" src="../images/rouxts2.png"> 
</div> 
<div id="FPS"></div> 
 
</body> 
</html>

Tagged with: 3D