dhteumeuleu » thank you

thank you

On May 1, 2007, in demo, by ge1doot

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/menu-3D.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>3D menu - 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: #fff; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position:absolute; 
		left: 0%; 
		top: 0%; 
		width: 100%; 
		height: 100%; 
		background: #fff; 
		overflow: hidden; 
	} 
 
	#screen div, a{ 
		position: absolute; 
		color: #000; 
		font-family: 'courier new', typewriter, matrix, monospace; 
		font-weight: bold; 
		text-decoration: none; 
		cursor: default; 
	} 
</style> 
 
<script type="text/javascript"> 
// ================================================== 
//             ----- menu 3D ----- 
// script written by Gerard Ferrandez - May 2007 
// http://www.dhteumeuleu.com 
// ================================================== 
 
/* ==== mouse position event ==== */ 
var xm = 0; 
var ym = 0; 
document.onmousemove = function(e){ 
	if (window.event) e=window.event; 
	xm = e.clientX; 
	ym = e.clientY; 
} 
 
/* ==== resize event ==== */ 
function resize() { 
	tdm.resize(); 
} 
onresize = resize; 
 
 
 
var tdm = { 
////////////////////// 
	FOCAL : 250, 
	ZOOM  : .03, 
////////////////////// 
	CX : 0, 
	CY : 0, 
 
	/* ==== resize ==== */ 
	resize : function() 
	{ 
		tdm.nw = this.scr.offsetWidth; 
		tdm.nh = this.scr.offsetHeight; 
		tdm.nx = 0; 
		tdm.ny = 0; 
		for (var o = tdm.scr; o != null; o = o.offsetParent) 
		{ 
			tdm.nx += o.offsetLeft; 
			tdm.ny += o.offsetTop; 
		} 
	}, 
 
	/* ==== main loop ==== */ 
	run : function () 
	{ 
		tdm.CX += (xm - tdm.CX) * .1; 
		tdm.CY += (ym - tdm.CY) * .1; 
		for (var i = 0, o; o = tdm.obj[i]; i++) 
		{ 
			var dx = o.X - tdm.CX + tdm.nx; 
			var dy = o.Y - tdm.CY + tdm.ny; 
			var d  = Math.sqrt(dx * dx + dy * dy); 
			var z  = (tdm.FOCAL - d) / tdm.FOCAL * (o.S * .1); 
			var s  = Math.max(0, o.S + (50 - d * .1) * (o.S * tdm.ZOOM)); 
			var x  = o.X + dx * z - s * .5; 
			var y  = o.Y + dy * z - s * .5; 
			if(x > -s * .5 && x < tdm.nw && y > -s && y < tdm.nh){ 
				o.style.left     = Math.round(x)  + 'px'; 
				o.style.top      = Math.round(y)  + 'px'; 
				o.style.fontSize = Math.round(s) + 'px'; 
				o.style.zIndex   = Math.round(1000 + z); 
			} else o.style.left  = '-1000px'; 
		} 
		setTimeout(tdm.run, 16); 
	}, 
 
	/* ==== initialization ==== */ 
	init : function (container, objects) 
	{ 
		this.scr = document.getElementById(container); 
		this.obj = []; 
		var k = 0; 
		for (var i = 0; i < objects.length; i++) 
		{ 
			var o = objects[i]; 
			var x = o[1]; 
			var y = o[2]; 
			var f = o[3]; 
			var d = o[4]; 
			var css = o[5]; 
			for (var j = 0; j < o[0].length; j++) 
			{ 
				var c = o[0].charAt(j); 
				if (c != ' ') 
				{ 
					var s = this.obj[k++] = document.createElement(o[6] ? 'a' : 'div'); 
					s.appendChild(document.createTextNode(c)); 
					s.X = x; 
					s.Y = y; 
					s.S = f; 
					if (css) for (var l in css) s.style[l] = css[l]; 
					if (o[6]) 
					{ 
						s.href = o[6]; 
						s.style.cursor = 'pointer'; 
					} 
					this.scr.appendChild(s); 
				} 
				if (d == 1) y += f * 1.2; 
				else if (d == 3) 
				{ 
					if (c != ' ') s.S = f; 
					f *= 1.5; 
				} 
				else x += f; 
			} 
		} 
		/* ==== go! ==== */ 
		this.resize(); 
		xm = this.nx + this.nw / 2; 
		ym = this.ny + this.nh / 2; 
		this.run(); 
	} 
} 
 
onload = function () { 
	/* ==== menu ==== */ 
	tdm.init("screen", [ 
		["THANK YOU FOR YOUR QUESTION", 110, 110, 12], 
		['+BUT', 455, 110, 12, 3], 
		["BUT I'M AFRAID", 490, 110, 12], 
		["I DON'T UNDERSTAND", 690, 110, 12], 
		["I NEED MORE TIME", 690, 130, 12], 
		["I HAVE NO IDEA", 690, 150, 12], 
 
		['#', 670, 110, 12, 0, {'color':'#F00'}, "snow.html"], ['[]', 660, 110, 24], 
		['#', 670, 130, 12, 0, {'color':'#F00'}, "spam.html"], ['[]', 660, 130, 24], 
		['#', 670, 150, 12, 0, {'color':'#F00'}, "haiku-js.html"], ['[]', 660, 150, 24], 
 
		["HERE IS NO PLACE", 110, 125, 12, 1], 
		["LIKE", 110, 370, 12], 
		['>', 170, 370, 12, 0, {'color':'#F00'}, "http://www.dhteumeuleu.com"], ['[]', 160, 370, 24], 
		["www.dhteumeuleu.com +", 190, 370, 12], 
 
		["THANK", 110, 110, 12, 3], 
 
		["10  MOVE MOUSE", 450, 370, 12], 
		["20  CLICK", 450, 390, 12], 
		["30  GOTO 10", 450, 410, 12], 
 
		['#', 480, 370, 12, 0, {'color':'#F00'}, "noclick.html"], ['[]', 470, 370, 24], 
		['#', 480, 390, 12, 0, {'color':'#F00'}, "fractal-F.html"], ['[]', 470, 390, 24], 
		['#', 480, 410, 12, 0, {'color':'#F00'}, "boids.html"], ['[]', 470, 410, 24], 
 
		["EVERYTHING", 455, 140, 12, 1], 
		["WILL BE OK IN THE END!", 455, 295, 12] 
	]); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"></div> 
 
 
</body> 
</html>

Tagged with: 3D • menu • text