dhteumeuleu » before my eyes

before my eyes

On May 14, 2004, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/Slideshow3D-vml.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>before my eyes - Interactive DHTML art-demos</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 { 
		background: #000; 
		width:100%; 
		height:100%; 
		margin:0; 
	} 
	#screen { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
 
	#img { 
		visibility: hidden; 
	} 
	#screen img  { 
		position:absolute; 
		left:-10000px; 
		z-index:100; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
		cursor: pointer; 
		border:#333 solid 1px; 
	} 
	#tit { 
		text-align:center; 
		position:absolute; 
		color:#fff; 
		font-family:verdana; 
		font-weight:bold; 
		font-size:48px; 
		filter: alpha(opacity=30); 
		opacity: 0.3; 
		width:100%; 
		bottom:12px; 
		z-index:10000; 
	} 
</style> 
<script type="text/javascript"> 
// ======================================================= 
// script: Gerard Ferrandez - Ge-1-doot - May 22, 2004 
// http://www.dhteumeuleu.com 
// Updated: February 2010 - namespaced 
// ======================================================= 
 
 
var diapo = function () { 
	var object = new Array(), 
	    K  = Math.PI / 180, 
	    N  = 0, 
	    xm = 0, 
	    ym = 0, 
	    mx = 0, 
	    my = 0, 
	    ax = 0, 
	    ay = 0, 
	    Nb = 0, 
	    tit = 0, 
	    img = 0; 
//////////////////// 
	var zM = 4; 
//////////////////// 
	var CObj = function (N, x, y, z){ 
		var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length]; 
		var o = document.createElement("img"); 
		o.onclick = function () { 
			if (object[N].on == true) object[N].on = false; 
			else object[N].on = true; 
		} 
		o.onmouseover = function () { 
			if (Nb != N) { 
				Nb = N; 
				tit.innerHTML= I.alt; 
			} 
		} 
		o.onmouseout = function () { 
			Nb = -1; 
			object[N].on = false; 
		} 
		o.onmousedown = new Function("return false"); 
		o.src = I.src; 
		scr.appendChild(o); 
		this.obj  = o.style; 
		this.z    = Math.round(z * ny * .25); 
		this.x    = Math.round(x * ny * .25); 
		this.y    = Math.round(y * ny * .25); 
		this.on   = false; 
		this.zOOm = 1; 
		this.N    = N; 
	} 
 
	CObj.prototype.anim = function () { 
		var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K); 
		var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K); 
		var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K); 
		zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K); 
		var w = (zP * .25 + ny * .25) * this.zOOm; 
		var h = w * .8; 
		if (this.on && zP > 0) { 
			if (this.zOOm < zM) this.zOOm += .05; 
		} else { 
			if (this.zOOm > 1) this.zOOm -= .025; 
		} 
		this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px"; 
		this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px"; 
		this.obj.width  = Math.round(w) + "px"; 
		this.obj.height = Math.round(h) + "px"; 
		this.obj.zIndex = Math.round(1000 + w); 
	} 
 
	var run = function () { 
		dx = (1 * xm) - mx; 
		dy = (1 * ym) - my; 
		mx += dx / 60; 
		my += dy / 60; 
		var i = 0, o; 
		while (o = object[i++]) o.anim(); 
		setTimeout(run, 16); 
	} 
 
	var resize = function () { 
		nx = scr.offsetWidth; 
		ny = scr.offsetHeight * .9; 
	} 
 
	var init = function () { 
		scr = document.getElementById("screen"); 
		img = document.getElementById("img"); 
		tit = document.getElementById("tit"); 
		resize(); 
		scr.onselectstart = new Function("return false"); 
		onresize = resize; 
		scr.onmousemove = function(e){ 
			if (window.event) e = window.event; 
			xm = (e.x || e.clientX); 
			ym = (e.y || e.clientY); 
		} 
		object.push( new CObj(0,1,-1,-1) ); 
		object.push( new CObj(1,1,1,-1) ); 
		object.push( new CObj(2,-1,-1,-1) ); 
		object.push( new CObj(3,-1,1,-1) ); 
		object.push( new CObj(4,1,-1,1) ); 
		object.push( new CObj(5,1,1,1) ); 
		object.push( new CObj(6,-1,-1,1) ); 
		object.push( new CObj(7,-1,1,1) ); 
		run(); 
	} 
	//////////////////////////////////////////////////////////// 
	return { 
		init : init 
	} 
}(); 
 
onload = function (){ 
	diapo.init(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
	<div id="img"> 
		<img alt="the promise" src="../images/41800.jpg"> 
		<img alt="through experience" src="../images/20800.jpg"> 
		<img alt="fit reward" src="../images/238000.jpg"> 
		<img alt="almost painful" src="../images/44800.jpg"> 
		<img alt="oblivion" src="../images/49800.jpg"> 
		<img alt="silent" src="../images/218000.jpg"> 
		<img alt="scrupulous" src="../images/23800.jpg"> 
		<img alt="a sprinkle of earth" src="../images/47800.jpg"> 
	</div> 
	<div id="tit" ></div> 
</div> 
 
</body> 
</html>

Tagged with: 3D • diapo