Direct Link

• Download: http://www.dhteumeuleu.com/dhtml/compo-parallax.html

Source Code

CSS

<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background-color: #000; 
		width: 100%; 
		height: 100%; 
		color: #FFF; 
		font-family: verdana, arial, helvetica, sans-serif; 
		font-size: 1em; 
	} 
	#screen { 
		position: absolute; 
		background: #000; 
		overflow: hidden; 
		cursor: url('../images/cursor_screenWhite.cur'), crosshair; 
	} 
	#screen .img { 
		position: absolute; 
		left: -9999px; 
		-ms-interpolation-mode: nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
	#screen .txt { 
		position: absolute; 
		width: 270px; 
		left: -9999px; 
		color: #fff; 
		font-family: arial, helvetica, sans-serif; 
		font-size: 1em; 
		text-align: left; 
	} 
	#screen .h1 { 
		position: relative; 
		font-size: 1.4em; 
		font-weight: bold; 
		left: 1.5em; 
	} 
	#screen .h2 { 
		position: relative; 
		left: 3em; 
		font-size: 1.1em; 
	} 
	#screen .h3 { 
		font-size: 0.8em; 
		margin-top: 0.5em; 
		color: #ccc; 
	} 
	#screen .green { color: #62FF00; } 
	#screen .purple { color: #B31BC1; } 
	#screen .red { color: #FF0000; } 
	#screen .yellow { color: #FCEA5A; } 
	#screen .night { color: #0030FF; } 
	#screen .turquoise { color: #00fcff; } 
	.b_green { background: #62FF00; } 
	.b_purple { background: #B31BC1; } 
	.b_red { background: #FF0000; } 
	.b_yellow { background: #FCEA5A; } 
	.b_night { background: #0030FF; } 
	.b_turquoise { background: #00fcff; } 
	#buttons, #design { 
		position: absolute; 
		visibility: hidden; 
	} 
	#nav { 
		position: absolute; 
		cursor: pointer; 
		width: 90px; 
		height: 10px; 
	} 
	#nav img { 
		position: relative; 
		margin-left: -6px; 
		cursor: pointer; 
	} 
	#design img { 
		position: absolute; 
	} 
	#screen .button { 
		float: left; 
		top: 0px; 
		cursor: pointer; 
		margin-right: 10px; 
	} 
	#data { 
		display: none; 
	} 
	#ILB_bar { 
		position: absolute; 
		font-size: 1px; 
		width: 0px; 
		height: 1px; 
		overflow: hidden; 
	} 
	.credit { 
		position: absolute; 
		color: #888; 
		width: 300px; 
		font-family: arial, helvetica, sans-serif; 
		font-size: 0.8em; 
		z-index: 20000; 
	} 
	a {text-decoration: none;color:#666;} 
	a:hover	{text-decoration: none;color:#ff8000;} 
	a:visited {text-decoration: none;color:#666;} 
	a:visited:hover {text-decoration: none;color:#ff8000;} 
 
</style> 
 

Script

<script type="text/javascript"> 
// ============================================================= 
//          ===== Composite Parallax Diaporama  ===== 
// script written by Gerard Ferrandez - June, 2009 
// http://www.dhteumeuleu.com 
// ------------------------------------------------------- 
// in association with Gabriel Uribe 
// credit all photos & GFX content 
// http://www.crealpha.fr 
// ============================================================= 
 
 
var m3D = function () { 
	/* ---- private vars ---- */ 
	var imagesPath = "../images/"; 
	var nav        = []; 
	var composDef  = []; 
	var compos     = []; 
	var pos        = 0; 
	var nbrCompos  = 0; 
	var nbrImages  = 0; 
	var loadedImg  = 0; 
	var loadingBar = 0; 
	var widthBar   = 0; 
	var xm         = 0; 
	var ym         = 0; 
	var nw         = 0; 
	var nh         = 0; 
	var nx         = 0; 
	var ny         = 0; 
	var obak       = ""; 
	var scr, structure; 
	/* ---- Easing function ---- */ 
	var Ease = function () { 
		this.target = 0; 
		this.position = 0; 
	} 
	Ease.prototype.move = function (target, speed) { 
		this.position += (target - this.position) * speed; 
	} 
	/* ---- camera setup ---- */ 
	var camera = { 
		x : new Ease(), 
		y : new Ease(), 
		focalLength : 300 
	} 
	/* ==== composite image Constructor ==== */ 
	var Compo3D = function (i, p) { 
		/* ---- insert HTML element ---- */ 
		if (p[0] == "text") { 
			/* ---- text ---- */ 
			this.img = document.getElementById(p[4]).cloneNode(true); 
			this.img.className = "txt"; 
			this.img.style.zIndex = Math.round(1100); 
			loadingBar.className = "b_" + p[4]; 
			this.wt = true; 
		} else { 
			/* ---- image ---- */ 
			this.img = document.createElement('img'); 
			this.img.className = "img"; 
			this.img.src = imagesPath + p[0] + (p[0].indexOf(".") > 0 ? "" : ".png"); 
			if (i >= 0) nbrImages++; 
		} 
		scr.appendChild(this.img); 
		this.ims = this.img.style; 
		if (i < 0) { 
			/* ---- particles ---- */ 
			this.particle = true; 
			this.active   = true; 
		} else { 
			this.moving = true; 
			if (p[6] * 1 == 1) this.originFountain = true; 
			this.active = false; 
			this.startDelay = Math.round(i * (100 / structure.length)); 
		} 
		/* ---- slide in ---- */ 
		var sx = p[1] * 20 * (p[7] || 1); 
		var sy = p[2] * 5 * (p[7] || 1); 
		/* ---- 3D variables ---- */ 
		this.point3D = { 
			x  : sx, 
			y  : sy, 
			z  : p[3] * 1, 
			x0 : p[1] * 1, 
			y0 : p[2] * 1, 
			z0 : p[3] * 1, 
			vx : sx - p[1] * 1, 
			vy : sy - p[2] * 1, 
			vz : 0, 
			w  : 0, 
			h  : 0, 
			zi : (p[8] || 0) * 1 
		} 
		/* ---- variables ---- */ 
		this.id      = i; 
		this.xs      = 1; 
		this.i       = 0; 
		this.frm     = 0; 
		this.timeout = 0; 
		this.loading = true; 
		this.loaded  = false; 
		/* --- lissajou --- */ 
		if (p[9] || p[10]) { 
			this.lx  = p[9] * 1; 
			this.ly  = p[10] * 1; 
			this.sx  = p[11] * 1; 
			this.sy  = p[12] * 1; 
			this.rx  = p[13] * 1 || (Math.random() * Math.PI); 
			this.lis = true; 
		} 
	} 
	/* ==== Particles animation ==== */ 
	Compo3D.prototype.animParticle = function () { 
		var p = this.point3D; 
		if (!this.initParticle) { 
			this.initParticle = true; 
			this.life = Math.random() * 200; 
		} 
		var a = .5 / this.life--; 
		p.x  += p.vx; 
		p.y  += p.vy; 
		p.z  += p.vz; 
		p.vx += (Math.random() * 50 - 25) * a; 
		p.vy += (Math.random() * 50 - 25) * a; 
		p.vz += -Math.random() * a; 
		if (this.life < 0) { 
			p.x = p.x0; 
			p.y = p.y0; 
			p.z = p.z0; 
			this.life = 200; 
			p.vx = 0; 
			p.vy = 0; 
			p.vz = 0; 
		} 
	} 
	/* ==== 3D parallax Animation ==== */ 
	Compo3D.prototype.animate = function () { 
		if (this.loaded) { 
			if (this.active) { 
				var p = this.point3D; 
				/* ---- move to position ---- */ 
				if (this.moving) { 
					if (this.frm <= 100) { 
						this.i += this.xs; 
						p.x -= (p.vx * this.i * .0004); 
						p.y -= (p.vy * this.i * .0004); 
						if (this.i == 50) this.xs = -1; 
					} else { 
						p.x = p.x0; 
						p.y = p.y0; 
						this.moving = false; 
						/* ---- particles origin ---- */ 
						if (this.originFountain) { 
							for (var i = 0; i < compos.length; i++) { 
								var o = compos[i]; 
								if (o.particle) { 
									o.point3D.x0 = p.x0; 
									o.point3D.y0 = p.y0; 
									o.point3D.z0 = p.z0; 
								} 
							} 
						} 
						/* --- kill object --- */ 
						if (this.remove) { 
							scr.removeChild(this.img); 
							return false; 
						} 
						/* --- reset loading bar --- */ 
						if (this.wt) widthBar = 230; 
					} 
				} 
				/* ---- parallax ---- */ 
				var x = p.x + camera.x.position; 
				var y = p.y + camera.y.position; 
				var scale = camera.focalLength / (camera.focalLength + p.z); 
				x *= scale; 
				y *= scale; 
				/* ---- lissajou ---- */ 
				if (this.lis) { 
					x += Math.sin(this.frm * this.sx) * this.lx; 
					y += Math.sin(this.rx + this.frm * this.sy) * this.ly; 
				} 
				/* ---- positioning ---- */ 
				this.ims.left = Math.round((-camera.x.position * .9) + x + nw - p.w) + 'px'; 
				this.ims.top  = Math.round((-camera.y.position * .9) + y + nh - p.h) + 'px'; 
				this.frm++; 
			} else { 
				/* ---- delay ---- */ 
				this.startDelay--; 
				if (this.startDelay < 0) this.active = true; 
			} 
		} else { 
			if (this.loading) { 
				/* ---- Image loaded ---- */ 
				if (this.img.complete) { 
					if (!this.particle) loadedImg++; 
					this.loading = false; 
					this.point3D.w = this.img.width * .5; 
					this.point3D.h = this.img.height * .5; 
					this.img.style.zIndex = Math.round(1000 - (this.particle ? -1000 : (this.point3D.z0 + this.point3D.zi))); 
					/* ---- update loading bar ---- */ 
					loadingBar.style.width = Math.round(loadedImg / nbrImages * 235) + 'px'; 
				} 
				this.timeout++; 
			} 
			if (loadedImg == nbrImages) { 
				/* ---- Composition loaded ---- */ 
				loaded = true; 
				for (var i = 0; i < compos.length; i++) { 
					var o = compos[i]; 
					o.loaded = true; 
					o.loading = false; 
					if (o.remove) { 
						o.frm = 0; 
						o.moving = true; 
					} 
				} 
			} 
			if (this.timeout > 1000) { 
				this.remove = true; 
				this.img.style.display = "none"; 
				nbrImages--; 
			} 
		} 
		return true; 
	} 
	/* ==== position html ==== */ 
	var position = function (param) { 
		var i = 0, o; 
		while( o = param[i++] ) { 
			var id = document.getElementById(o[0]) || o[0]; 
			if (o.length > 3) { 
				id.style.width  = Math.round(o[3]) + "px"; 
				id.style.height = Math.round(o[4]) + "px"; 
			} 
			id.style.left = Math.round(o[1]) + "px"; 
			id.style.top  = Math.round(o[2]) + "px"; 
		} 
	} 
	/* ==== Inject new structure ==== */ 
	var loadStructure = function (pos) { 
		structure = composDef[pos].split(";"); 
		for (var i = 0; i < structure.length; i++) { 
			var p = structure[i].replace(/^\s+/g,'').replace(/\s+$/g,'').split(","); 
			if (p != "") compos.push(new Compo3D(i, p)); 
		} 
	} 
	/* ==== switch to new image (on click) ==== */ 
	var transition = function (p) { 
		if (loadedImg == nbrImages) { 
			/* ---- reset loading bar ---- */ 
			widthBar = 0; 
			loadingBar.style.width = "0px"; 
			/* ---- change pos ---- */ 
			if (p) pos = p - 1; else pos = ++pos % nbrCompos; 
			/* ---- nav leds ---- */ 
			if (obak) document.getElementById("d_" + obak).src  = document.getElementById("n_all").src; 
			document.getElementById("d_" + nav[pos]).src = document.getElementById("n_" + nav[pos]).src; 
			obak = nav[pos]; 
			/* ---- remove preview compo ---- */ 
			var j = 0; 
			for (var i = 0; i < compos.length; i++) { 
				var o = compos[i]; 
				if (!o.particle) o.remove = true; 
			} 
			/* ---- load new compo ---- */ 
			loadStructure(pos); 
		} 
	} 
	/* ==== Initialize image structures ==== */ 
	var initScript = function () { 
		/* --- create particles --- */ 
		for (var i = 0; i < 40; i++) 
			compos.push(new Compo3D(-1, [ 
				Math.random()>.7 ? "sphere_moy_v3" : "sphere_min_v3", -999, -999, 0, '', '', 1 
			])); 
		/* --- decode HTML structure --- */ 
		var d = document.getElementById("data"); 
		if (d) { 
			nbrCompos = 0; 
			for (var i = 0, k = 0; i < d.childNodes.length; i++) { 
				if (d.childNodes[i].nodeType == 1) { 
					var c = composDef[nbrCompos++] = d.childNodes[i].innerHTML; 
					/* ---- color ---- */ 
					c = c.split(";"); 
					c = c[c.length - 2].split(','); 
					if (c[c.length - 1] != "") nav[k++] = c[c.length - 1]; 
					if (obak == "") obak = c[c.length - 1]; 
				} 
			} 
		} 
		/* --- load first compo --- */ 
		loadStructure(0); 
	} 
	//////////////////////////////////////////////////////////////////////////// 
	/* ==== DOM events ==== */ 
	function addEvent (o, e, f) { 
		if (window.addEventListener) o.addEventListener(e, f, false); 
		else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
	} 
	/* ==== screen position and dimensions ==== */ 
	function resize() { 
		/* --- resize --- */ 
		var h = Math.max(200, Math.min(700, document.body.offsetHeight)); 
		var w = Math.max(320, Math.min(1000, document.body.offsetWidth)); 
		nx = Math.round(30 + (document.body.offsetWidth - w) * .5); 
		ny = Math.round(50 + (document.body.offsetHeight - h) * .5); 
		nw = (w - 60) * .5; 
		nh = (h - 100) * .5; 
		/* --- borders --- */ 
		document.getElementById("design").style.visibility = "visible"; 
		position([ 
			[scr, nx, ny, w - 60, h - 100], 
			["br_top", nx - 2, ny - 29, 5 + nw * 2, 30], 
			["br_bottom", nx - 4, ny + nh * 2, 7 + nw * 2, 30], 
			["br_left", nx - 28, ny - 3, 27, 7 + nh * 2], 
			["br_right", nx + nw * 2, ny - 4, 27, 10 + nh * 2], 
			["c_tr", nx + nw * 2, ny - 31], 
			["c_tl", nx - 29, ny - 30], 
			["c_bl", nx - 31, 3 + ny + nh * 2], 
			["c_br", nx + nw * 2, 3 + ny + nh * 2], 
			["b_preload", nx + nw - 122, 10 + ny + nh * 2], 
			["ILB_bar", nx + nw - 118, 12 + ny + nh * 2], 
			["i_bl", nx, 11 + ny + nh * 2], 
			["i_br", nx + nw * 2 - 45, 11 + ny + nh * 2], 
			["c_gf", 40 + nx, 24 + ny + nh * 2], 
			["c_gb", nx + nw * 2 - 345, 24 + ny + nh * 2], 
			["nav", nx + nw - 40, ny - 19] 
		]); 
		return false; 
	} 
	/* ==== browser events ==== */ 
	var initEvents = function () { 
		/* ---- mouse move ---- */ 
		addEvent(scr, 'mousemove', function (e) { 
			if (window.event) e = window.event; 
			xm = e.clientX; 
			ym = e.clientY; 
		}); 
		/* ---- screen resize ---- */ 
		resize(); 
		addEvent(window, 'resize', resize); 
		scr.onselectstart = function () { return false; } 
		scr.ondrag        = function () { return false; } 
		scr.ondblclick    = function () { return false; } 
	} 
	//////////////////////////////////////////////////////////////////////////// 
	/* ==== main loop ==== */ 
	var run = function () { 
		/* --- move camera --- */ 
		camera.x.move(xm - nw - nx, .1); 
		camera.y.move(ym - nh - ny, .1); 
		/* --- loop through images --- */ 
		var i = 0, o; 
		while( o = compos[i++] ) { 
			if (o.particle) o.animParticle(); 
			if (!o.animate()) compos.splice(--i, 1); 
		} 
		/* --- reset loading bar --- */ 
		if (widthBar) { 
			widthBar *= .9; 
			if (widthBar < 1) widthBar = 0; 
			loadingBar.style.width = Math.round(widthBar) + "px"; 
		} 
		/* --- loop --- */ 
    	setTimeout(run, 16); 
	} 
	return { 
		//////////////////////////////////////////////////////////////////////////// 
		/* ==== initialize script ==== */ 
		init : function () { 
			addEvent(window, 'load', function () { 
				/* ---- init script ---- */ 
				if (!document.getElementById('ie6')) { 
					scr = document.getElementById("screen"); 
					loadingBar = document.getElementById('ILB_bar'); 
					initEvents(); 
					initScript(); 
					run(); 
				} 
			}); 
		}, 
		/* ---- extrenal access ---- */ 
		button : function (o, src, i) { 
			if (i != pos) { 
				if (!src) src = "b_" + nav[pos]; 
				o.src = document.getElementById(src).src; 
			} 
		}, 
		next : function () { 
			transition(); 
		}, 
		goto : function (p) { 
			if (p != pos) transition(p + 1); 
		} 
	} 
}(); 
 
/* ==== start script ==== */ 
m3D.init(); 
 
</script> 
 

HTML

<body> 
 
<div id="screen"> 
	<!--[if lte IE 6]><div id="ie6"><br> Sorry IE6 is not supported!<![endif]--> 
</div> 
 
<div id="data"> 
	<div> 
		toit_eglise,-100,-120,0; 
		perspective_eglise,-40,20,0; 
		lampadaire_eglise,-140,0,-10; 
		2eme_lampadaire,-100,40,-5; 
		perspective_lampadaire,0,40,5,,,,3; 
		1er_lampadaire,-180,-50,-20; 
		arbuste_2-o,-195,72,-25; 
		arbuste_1,-300,20,-28; 
		sol_ier_plan-o,-190,220,-25; 
		lueur_centre,-195,-50,-21,,,1; 
		light_4,-180,-140,-24; 
		light_2,-240,-120,-23; 
		light_1,-260,-80,-25; 
		lianne_lum_3,-190,-80,-30; 
		lianne_lum_4,-100,60,-40,,,,3; 
		lianne_lum_2,-20,40,-50,,,,3; 
		lianne_lum_1,-80,-40,-60; 
		light_5, 20,-40,-60; 
		light_6,-100,-80,-80; 
		text,75,100,20,green; 
	</div> 
	<div> 
		4_4_light_effect,-40,-140,-5; 
		4_8_light_effect,120,20,-25; 
		1_plan_montagne_v3,-120,220,-60; 
		3_1_plan_riviere,0,260,-20; 
		2_plan_arbres_v2,-300,130,-40; 
		4_1_light_point,-60,230,-20; 
		3_2_plan_arbres,-30,200,-21; 
		4_2_light_point,-60,180,-15; 
		4_7_light_effect,-150,60,-15; 
		5_compo_ville_part_1,-30,145,-10,,,,2; 
		5_compo_ville_part_5_2,-95,10,-11; 
		6_sphere_v3,-230,40,-5; 
		6_1_colonne_1,-40,-20,0; 
		6_1_effet_colonne_1,-40,-125,3; 
		6_2_colonne_2,30,50,2; 
		6_2_effet_colonne_2,30,-20,5; 
		6_3_colonne_3,80,80,4; 
		6_3_effet_colonne_3,80,40,7; 
		4_6_light_effect,-300,80,10; 
		4_7_light_effect,-250,80,10; 
		sphere_min_v3,-40,20,-10,,,1,1000; 
		text,-420,-280,20,purple; 
	</div> 
	<div> 
		back_compo.jpg,-100,-140,10; 
		14_immeuble_5,-390,50,0; 
		14_immeuble_2,-200,50,0; 
		13_immeuble_1,-260,-5,-10; 
		15_immeuble_3,-110,80,5; 
		10_palmier_v5,40,60,-10; 
		4_1_sphere_light_compo_1,40,-40,-10; 
		4_1_sphere_light_compo_2,100,-40,-15; 
		4_2_eclat_light_1,110,-80,-25; 
		4_3_eclat_light_1,90,0,-25; 
		8_2_effet_light_nuage_2-o,-63,18,-15,,,1; 
		8_1_effet_light_nuage_1-o,-35,55,-21; 
		6_effect_light_compact,-40,60,-15; 
		7_1_light_red_effect_1,60,-40,-20; 
		7_2_light_red_effect_2,100,70,-20; 
		7_3_light_red_effect_3,-20,60,-20; 
		7_4_light_red_effect_4,40,120,-20; 
		7_5_light_red_effect_5,50,80,-25; 
		7_6_light_red_effect_6,-150,0,-15; 
		7_7_light_red_area_1,100,60,-15; 
		7_8_light_red_area_2,120,-40,-10; 
		7_9_light_red_area_3,150,60,-10; 
		7_10_light_red_area_4,200,60,-20; 
		9_1_effet_light_purple_1-o,-40,80,-19; 
		9_2_effet_light_purple_2-o,-120,-80,0; 
		11_lueur_rose-o,-240,0,-29; 
		12_2_lac_2,-80,160,-10; 
		12_1_lac_1,-80,180,-10; 
		1_arbre_bottom,-280,0,-30; 
		1_arbre_top-o,-280,-250,-30; 
		3_arbre,-230,-160,-20; 
		2_plante,-460,0,-50; 
		4_plante,-100,200,-50; 
		text,150,-280,20,red; 
	</div> 
	<div> 
		31_back.jpg,-50,-100,10; 
		29_2_mur_plafond_2,-260,-130,5; 
		26_light_structure,-400,-150,30,,,,,-20; 
		25_light_structure,-470,-150,32,,,,,-10; 
		24_light_structure,-460,-100,25,,,,,-15; 
		23_poteau,-400,-200,20,,,,,-10; 
		21_light_poteau,-410,-270,15,,,,,-10; 
		22_light_poteau,-410,-270,10,,,,,-10; 
		20_plante_center,-50,-50,0; 
		18_particules,-180,-50,20,,,,,-15; 
		18_1_nuage_fond,-210,-10,18,,,1,,-15; 
		27_2_spirale_centre,-210,-15,10,,,,,-15; 
		27_1_spirale_centre,-180,-15,7,,,,,-15; 
		16_light,-320,-50,18,,,,,-15; 
		15_plante,-380,0,0; 
		7_plante,-430,0,0; 
		18_2_light_center,-60,70,18,,,,,-15; 
		12_light,-360,-140,15,,,,,-15; 
		14_light,40,120,15,,,,,-15; 
		10_effet_top,-150,-180,20,,,,,-15; 
		5_effet_top,-250,-170,25,,,,,-20; 
		7_2_effet_top,-130,-250,15,,,,,-20; 
		19_directionel_effect,130,140,20,,,,,-20; 
		9_light_blue,-300,20,-15; 
		8_light_blue,-200,140,-30; 
		5_light_white,-60,130,10,,,,,-20; 
		6_light_blue,100,200,-30,,,,,0; 
		3_plante,-330,140,-40; 
		7_plante,-150,140,-10,,,,,-10; 
		1_plante,0,200,-40; 
		4_plante_center,-120,80,-35; 
		17_plante,100,220,-10,,,,,0; 
		text,150,-100,20,night; 
	</div> 
	<div> 
		back.jpg,-50,170,20; 
		8_plant_center,-100,0,20,,,,,-10; 
		7_effect_back,-70,-70,25,,,,,-35; 
		11_effect_circle,-100,-150,30,,,,,-10; 
		9_effet_left,-200,0,25,,,,,-10; 
		1_3_light_geyser,-100,-170,25,,,,,-50; 
		6_3_effect_dome,-40,-85,17,,,,,-15; 
		6_2_effect_dome,-25,-70,15,,,,,-15; 
		6_1_effect_dome,-80,-150,21,,,,,-15; 
		1_1_geyser,-190,-140,15,,,,,-15; 
		4_1_light_diag,-80,-170,10,,,,,0; 
		4_2_light_diag,-160,-220,10,,,,,0; 
		4_2_light_diag,160,120,10,,,,,0; 
		sphere_min_v3,-73,-83,20,,,1,1000; 
		4_1_rain_compo,-100,-40,-10,,,,,0; 
		4_2_rain_compo,-100,-40,-5,,,,,0; 
		1_plante_3,-100,-140,-40,,,,,20; 
		2_plante_3,-180,80,10; 
		3_plante_3,0,40,0,,,,3,-35; 
		text,150,-280,20,yellow; 
	</div> 
	<div> 
		back_5.jpg,-100,-120,20; 
		wall_right,50,10,5; 
		light_ban_2,90,260,0; 
		light_ban_1,-50,240,2; 
		wall_parallax,120,-20,-10; 
		wall_left,-300,-20,-15; 
		wall_left,-400,-20,-15; 
		rue_3,180,170,0,,,,,-20; 
		rue_2,130,130,-5,,,,,-20; 
		rue_1,100,140,-10,,,,,-20; 
		light_2_5,100,40,-10,,,,,-20; 
		light_1_5,60,-20,-15,,,,,-20; 
		mur_sieges,0,160,5,,,,,-20; 
		tower,-180,120,10; 
		neons,-320,80,-25; 
		neons_flou,-320,-20,-30; 
		sieges,-100,200,-40; 
		light_columns_8,-150,-120,15,,,,,-20; 
		light_columnsBlur_3,-130,-200,15,,,,,-20; 
		white_light,-165,-75,10,,,1,,-20; 
		light_columnsBlur_1,-160,-140,5,,,,,-20,0,20,0,.02; 
		light_columns_1,-160,-20,0; 
		light_columns_2,-140,-170,13,,,,,-20,0,60,0,.01; 
		light_columns_3,-180,-220,13,,,,,-20,0,60,0,.01; 
		light_columns_5,-120,-220,13,,,,,-20,0,60,0,.01; 
		text,150,0,20,turquoise; 
	</div> 
</div> 
<div id="buttons"> 
	<!-- nav leds cache --> 
	<img src="../images/bouton_menu_out.png" id="n_all" alt=""> 
	<img src="../images/bouton_menu_green.png" id="n_green" alt=""> 
	<img src="../images/bouton_menu_yellow.png" id="n_yellow" alt=""> 
	<img src="../images/bouton_menu_purple.png" id="n_purple" alt=""> 
	<img src="../images/bouton_menu_red.png" id="n_red" alt=""> 
	<img src="../images/bouton_menu_night.png" id="n_night" alt=""> 
	<img src="../images/bouton_menu_turquoise.png" id="n_turquoise" alt=""> 
	<!-- next buttons cache --> 
	<img src="../images/bouton_out_all.png" id="b_all" alt=""> 
	<img src="../images/bouton_on_green.png" id="b_green" alt=""> 
	<img src="../images/bouton_on_yelow.png" id="b_yellow" alt=""> 
	<img src="../images/bouton_on_purple.png" id="b_purple" alt=""> 
	<img src="../images/bouton_on_red.png" id="b_red" alt=""> 
	<img src="../images/bouton_on_night.png" id="b_night" alt=""> 
	<img src="../images/bouton_on_turquoise.png" id="b_turquoise" alt=""> 
	<!-- text nodes --> 
	<div id="green"> 
		<div class="h1">Surveillance</div> 
		<div class="h2 green">strategies</div> 
		<img class="button" src="../images/bouton_out_all.png" onmouseover='m3D.button(this);' onmouseout='m3D.button(this,"b_all");' onclick='m3D.next();' alt=""> 
		<span class="h3">The central control structure felt technically reassuring  - albeit lyrical enough.</span> 
	</div> 
	<div id="purple"> 
		<div class="h1">Apparently</div> 
		<div class="h2 purple">transparent</div> 
		<img class="button" src="../images/bouton_out_all.png" onmouseover='m3D.button(this);' onmouseout='m3D.button(this,"b_all");' onclick='m3D.next();' alt=""> 
		<span class="h3">After the gravitational shift, the rotation curve of near galaxies felt resonant as detected by our instruments.</span> 
	</div> 
	<div id="red"> 
		<div class="h1">Brief</div> 
		<div class="h2 red">period</div> 
		<img class="button" src="../images/bouton_out_all.png" onmouseover='m3D.button(this);' onmouseout='m3D.button(this,"b_all");' onclick='m3D.next();' alt=""> 
		<span class="h3">There shall be a brief period around the end of our time when new heavy materials will show a tremendous luminic radiance.</span> 
	</div> 
	<div id="night"> 
		<div class="h1">Brisk</div> 
		<div class="h2 night">hindsight</div> 
		<img class="button" src="../images/bouton_out_all.png" onmouseover='m3D.button(this);' onmouseout='m3D.button(this,"b_all");' onclick='m3D.next();' alt=""> 
		<span class="h3">We were getting a too narrow elliptical pivoting of the glass wheel.</span> 
	</div> 
	<div id="yellow"> 
		<div class="h1">Heart</div> 
		<div class="h2 yellow">of darkness</div> 
		<img class="button" src="../images/bouton_out_all.png" onmouseover='m3D.button(this);' onmouseout='m3D.button(this,"b_all");' onclick='m3D.next();' alt=""> 
		<span class="h3">So far, the beguiling transparency menaced our guides in a creepy way.</span> 
	</div> 
	<div id="turquoise"> 
		<div class="h1">Illusion</div> 
		<div class="h2 turquoise">of safety</div> 
		<img class="button" src="../images/bouton_out_all.png" onmouseover='m3D.button(this);' onmouseout='m3D.button(this,"b_all");' onclick='m3D.next();' alt=""> 
		<span class="h3">Metallic, the closed space illusion murmurs inside.</span> 
	</div> 
</div> 
<div id="design"> 
	<!-- borders --> 
	<img src="../images/cadre_left.png" id="br_left" alt=""> 
	<img src="../images/cadre_right.png" id="br_right" alt=""> 
	<img src="../images/cadre_top.png" id="br_top" alt=""> 
	<img src="../images/cadre_bot.png" id="br_bottom" alt=""> 
	<img src="../images/corner_TL.png" id="c_tl" alt=""> 
	<img src="../images/corner_TR.png" id="c_tr" alt=""> 
	<img src="../images/corner_BR.png" id="c_br" alt=""> 
	<img src="../images/corner_BL.png" id="c_bl" alt=""> 
	<img src="../images/icone_credits.png" id="i_bl" alt=""> 
	<img src="../images/icone_credits.png" id="i_br" alt=""> 
	<img src="../images/back_preload.png" id="b_preload" alt=""> 
	<div id="ILB_bar"></div> 
	<div class="credit" id="c_gf">Home: <a href="http://www.dhteumeuleu.com/" onclick="window.open(this.href); return false;">wwww.dhteumeuleu.com</a></div> 
	<div class="credit" style="text-align: right;" id="c_gb">Design: <a href="http://www.gabrieluribe.com/" onclick="window.open(this.href); return false;">Gabriel Uribe.com</a></div> 
</div> 
<div id="nav"> 
	<!-- nav leds --> 
	<img src="../images/bouton_menu_green.png" onmouseover='m3D.button(this,"n_green");' onmouseout='m3D.button(this,"n_all",0);' onclick='m3D.goto(0);' id="d_green" alt=""> 
	<img src="../images/bouton_menu_out.png" onmouseover='m3D.button(this,"n_purple");' onmouseout='m3D.button(this,"n_all",1);' onclick='m3D.goto(1);' id="d_purple" alt=""> 
	<img src="../images/bouton_menu_out.png" onmouseover='m3D.button(this,"n_red");' onmouseout='m3D.button(this,"n_all",2);' onclick='m3D.goto(2);' id="d_red" alt=""> 
	<img src="../images/bouton_menu_out.png" onmouseover='m3D.button(this,"n_night");' onmouseout='m3D.button(this,"n_all",3);' onclick='m3D.goto(3);' id="d_night" alt=""> 
	<img src="../images/bouton_menu_out.png" onmouseover='m3D.button(this,"n_yellow");' onmouseout='m3D.button(this,"n_all",4);' onclick='m3D.goto(4);' id="d_yellow" alt=""> 
	<img src="../images/bouton_menu_out.png" onmouseover='m3D.button(this,"n_turquoise");' onmouseout='m3D.button(this,"n_all",5);' onclick='m3D.goto(5);' id="d_turquoise" alt=""> 
</div> 
 
</body>