dhteumeuleu » our goal

our goal

On September 1, 2007, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/grid3D.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>our goal - 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: #222; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		filter: alpha(opacity=100); 
	} 
	#screen { 
		position:absolute; 
		width: 100%; 
		height: 100%; 
		background: #000; 
	} 
	#screen img { 
		position: absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
</style> 
 
<script type="text/javascript"> 
// ============================================================= 
//              ===== grid 3D ===== 
// script written by Gerard Ferrandez - September 15, 2007 
// http://www.dhteumeuleu.com 
// ============================================================= 
 
 
r3d = { 
	////////////////////////////////:: 
	N    : 3.5, 
	FL   : 350, 
	rY   : 2.8, 
	////////////////////////////////:: 
	O    : [], 
	a    : 0, 
	y    : 0, 
	scr  : 0, 
 
	init : function () 
	{ 
		this.scr = document.getElementById('screen'); 
		this.img = document.getElementById('particles'); 
		document.onselectstart = function () { return false; } 
		document.ondrag        = function () { return false; } 
 
		for (var x = -r3d.N; x <= r3d.N; x++) 
		{ 
			for (var z = -r3d.N; z <= r3d.N; z++) 
			{ 
				o = document.createElement('img'); 
				o.x3d = x; 
				o.z3d = z; 
				o.src = r3d.img.src; 
				r3d.scr.appendChild(o); 
				r3d.O.push(o); 
			} 
		} 
		this.scr.onmousemove = function (e) 
		{ 
			if (window.event) e = window.event; 
			r3d.xm = e.clientX - r3d.nx; 
			r3d.ym = e.clientY - r3d.ny; 
			return false; 
		} 
 
		r3d.resize(); 
		r3d.y = r3d.nh / 2; 
		r3d.ym = r3d.nh; 
		r3d.xm = r3d.nw * .9; 
		r3d.run(); 
	}, 
 
	resize : function () { 
		var o = r3d.scr; 
		r3d.nw = o.offsetWidth / 2; 
		r3d.nh = o.offsetHeight / 2; 
		for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent) 
		{ 
			r3d.nx += o.offsetLeft; 
			r3d.ny += o.offsetTop; 
		} 
	}, 
 
	run : function () 
	{ 
 
		r3d.a += (r3d.xm - r3d.nw) * .0001; 
		r3d.y += ((r3d.ym - r3d.nh) - r3d.y) / 40; 
		var ca = Math.cos(r3d.a); 
		var sa = Math.sin(r3d.a); 
 
		for (var i = 0, o; o = r3d.O[i]; i++) 
		{ 
			var x = o.x3d * (r3d.nw / 8); 
			var z = o.z3d * (r3d.nw / 8); 
			var X = sa * x + ca * z; 
			var Y = sa * z - ca * x; 
			var W = r3d.FL / (r3d.FL + Y); 
			var w = Math.round(W * r3d.nw / 10); 
 
			o.style.left   = Math.round(X * W + r3d.nw - w * .5) + 'px'; 
			o.style.top    = Math.round(r3d.y * W + r3d.nh - w * .5) + 'px'; 
			o.style.width  = Math.max(2, w) + 'px'; 
			o.style.height = Math.max(6, w * r3d.rY) + 'px'; 
			o.style.zIndex = w; 
 
		} 
		setTimeout(r3d.run, 32); 
	} 
 
} 
 
onload = function() 
{ 
	onresize = r3d.resize; 
	r3d.init(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"></div> 
 
<img id="particles" alt="" src="../images/poser.gif" style="visibility:hidden"> 
 
</body> 
</html>

Tagged with: 3D