dhteumeuleu » it’s an illusion

it’s an illusion

On September 2, 2007, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>it's an illusion - 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: #111; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position:absolute; 
		left: 0%; 
		top: 0%; 
		width: 100%; 
		height: 100%; 
		background: #000; 
		overflow: hidden; 
		cursor: pointer; 
	} 
	#screen img { 
		position: absolute; 
	} 
	#vb { 
		position: absolute; 
		border-left: #666 solid 1px; 
		left: 50%; 
		top: 10%; 
		height: 80%; 
		z-index: 1000; 
	} 
	#title { 
		position: absolute; 
		color: #fff; 
		font-family: arial; 
		font-weight: bold; 
		font-size: 1.5em; 
		text-align: center; 
		width: 100%; 
		top: 1em; 
	} 
	#credit { 
		position: absolute; 
		color: #666; 
		font-family: arial; 
		font-size: 0.8em; 
		width: 99%; 
		text-align: right; 
		top: 2px; 
		z-index: 10000; 
	} 
	a {text-decoration: none;color:#fff;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#fff;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
</style> 
 
<script type="text/javascript"> 
// ============================================================= 
//              ===== it's an illusion ===== 
// script written by Gerard Ferrandez - September 11, 2007 
// http://www.dhteumeuleu.com 
// ============================================================= 
 
 
r3d = { 
	/////////////////////////// 
	spd  : .03, 
	max  : 200, 
	/////////////////////////// 
	O    : [], 
	num  : 0, 
	down : false, 
	xb   : 0, 
	yb   : 0, 
	scr  : 0, 
	R    : 0, 
	N    : 0, 
	Im   : 0, 
	img  : 0, 
 
	init : function () 
	{ 
		this.scr = document.getElementById('screen'); 
		this.img = document.getElementById('particles').getElementsByTagName('img'); 
		this.scr.onselectstart = function () { return false; } 
		this.scr.ondrag        = function () { return false; } 
		this.scr.onmousemove   = function (e) 
		{ 
			if (r3d.down) 
			{ 
				if (window.event) e = window.event; 
				var xm = e.clientX - r3d.nx; 
				var ym = e.clientY - r3d.ny; 
				if (Math.abs(xm - r3d.xb) + Math.abs(ym - r3d.yb) > r3d.img[r3d.Im % r3d.img.length].width) 
				{ 
					var o; 
					if (r3d.N < r3d.max) 
					{ 
						o = document.createElement('img'); 
						r3d.scr.appendChild(o); 
						r3d.O[r3d.N % r3d.max] = o; 
					} 
					else o = r3d.O[r3d.N % r3d.max]; 
					var i = r3d.img[r3d.Im % r3d.img.length]; 
					if (xm < r3d.nw) 
					{ 
						o.X = r3d.nw - xm; 
						o.c = -r3d.R - Math.PI / 2; 
					} else { 
						o.X =  xm - r3d.nw; 
						o.c = -r3d.R + Math.PI / 2; 
					} 
					o.src = i.src; 
					o.w = Math.round(i.width / 2); 
					o.style.top = Math.round(ym - o.height / 2) + 'px'; 
					o.style.left = "-9999px"; 
					r3d.N++; 
					r3d.xb = xm; 
					r3d.yb = ym; 
				} 
			} 
			return false; 
		} 
		this.scr.onmousedown = function (e) 
		{ 
			r3d.down = true; 
			r3d.xb = r3d.yb = -999; 
			return false; 
		} 
		this.scr.onmouseup = function (e) 
		{ 
			r3d.down = false; 
			r3d.Im++; 
			if(r3d.N > 10) document.getElementById('title').innerHTML = ""; 
			return false; 
		} 
		r3d.resize(); 
		r3d.run(); 
	}, 
 
	resize : function () { 
		var o = r3d.scr; 
		r3d.nw = o.offsetWidth / 2; 
		for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent) 
		{ 
			r3d.nx += o.offsetLeft; 
			r3d.ny += o.offsetTop; 
		} 
	}, 
 
	run : function () 
	{ 
	    r3d.R += r3d.spd; 
		for (var i = 0, o; o = r3d.O[i]; i++) 
		{ 
			o.style.left = Math.round(r3d.nw + o.X * Math.sin(r3d.R + o.c) - o.w * .5) + 'px'; 
			o.style.zIndex = 1000 + Math.round(2 * o.w + (Math.abs(o.X) * Math.cos(r3d.R + o.c))); 
		} 
		setTimeout(r3d.run, 32); 
	} 
 
} 
 
onload = function() 
{ 
	onresize = r3d.resize; 
	r3d.init(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
	<div id="title">CLICK AND DRAG TO DRAW</div> 
	<div id="vb"></div> 
	<div id="credit"> 
	·home: <a href="http://www.dhteumeuleu.com/" target="_self" title="Interactive DHTML demos">www.dhteumeuleu.com </a> 
	·source: <a href="http://www.dhteumeuleu.com/colorsyntax/viewJS.php?src=rotate3D.html" target="_self" title="source code">code</a> 
	</div> 
</div> 
 
<div id="particles" style="visibility:hidden"> 
	<img alt="" src="../images/mb1.gif"> 
	<img alt="" src="../images/mb2.gif"> 
	<img alt="" src="../images/mb3.gif"> 
	<img alt="" src="../images/mb4.gif"> 
</div> 
 
</body> 
</html>

Tagged with: 3D