dhteumeuleu » Parallax III

Parallax III

On June 1, 2008, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>parallax III - 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%; 
		color: #fff; 
		margin: 0px; 
		padding: 0px; 
		font-family: verdana, arial; 
	} 
	div, span, a, img  { 
		position: absolute; 
	} 
	#frm { 
		position:absolute; 
		width:60%; 
		height:60%; 
		left:20%; 
		top:20%; 
		overflow:hidden; 
		background:#fed; 
	} 
	.t1 { 
		left:0px; 
		bottom: 85%; 
		font-size:2.5em; 
		text-align:center; 
		width:100%; 
		font-weight:bold; 
	} 
	.t2 { 
		left:0px; 
		top:-0.25em; 
		font-size:2em; 
		text-align:center; 
		width:100%; 
		color:#666; 
		-ms-filter: "alpha(Opacity=60)"; 
		filter: alpha(opacity=60); 
		opacity: 0.6; 
	} 
	a {text-decoration: none;color:#fff;} 
</style> 
 
<script type="text/javascript"> 
/* 
   ================================================================================ 
        script: parallax-III 
        author: Gerard Ferrandez - [Ge1doot] 
          date: June 2, 2008 
          site: http://www.dhteumeuleu.com 
       license: CC-BY-NC - do not remove this notice 
       images from: http://www.webdesignerwall.com/tutorials/parallax-gallery/ 
   ================================================================================ 
*/ 
 
var prx = function () { 
	/* //////////// ==== private vars & methods ==== //////////// */ 
	var P = []; 
	var mv = false; 
	var xm = ym = xc = yc = nw = nh = 0; 
	var N, force, attenuation, tags; 
	/* ===== crossbrowsers addEvent ==== */ 
	function addEvent (o, e, f) { 
		if (window.addEventListener) o.addEventListener(e, f, false); 
		else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
	} 
	/* ===== main parallax function ==== */ 
	function pos() { 
		/* ---- mouse move? ---- */ 
		if (Math.abs(xm - xc) > 1 || Math.abs(ym - yc) > 1) { 
			/* ---- move ease ---- */ 
			xc += (xm - xc) / 5; 
			yc += (ym - yc) / 5; 
			mv = true; 
			/* ---- parallaxize all tags ---- */ 
			var i = N; 
			while (i--) { 
				var o = P[i]; 
				var x = Math.round(xc * o.Z / o.L); 
				var y = Math.round(yc * o.Z / o.L); 
				o.style.marginLeft   = x + 'px'; 
				o.style.marginTop    = y + 'px'; 
				o.style.marginRight  = -x + 'px'; 
				o.style.marginBottom = -y + 'px'; 
			} 
			/* ---- loop ---- */ 
			setTimeout(pos, 16); 
		/* ---- no move (zero CPU) ---- */ 
		} else mv = false; 
	} 
	/* ===== on mouse move ==== */ 
	function move (e) { 
		/* ---- get mouse coordinates ---- */ 
		e = e || window.event; 
		xm = Math.round(((nw * .5) - e.clientX) / 10); 
		ym = Math.round(((nh * .5) - e.clientY) / 10); 
		/* ---- re-launch animation if loop stopped (idle) ---- */ 
		if (!mv) pos(); 
	} 
	/* ==== add parallax node  ==== */ 
	function addNode(node) { 
		if (tags.indexOf(node.tagName) >= 0 || (node.style && node.style.zIndex)) { 
			P.push(node); 
			node.Z = node.style.zIndex || 1; 
			node.L = force; 
		} 
	} 
	/* ==== traverse DOM (recursive method) ==== */ 
	function traverseDom(node) { 
		addNode(node); 
		if (node.hasChildNodes) { 
			force *= attenuation; 
			var child = node.firstChild; 
			while (child) { 
				traverseDom(child); 
				child = child.nextSibling; 
			} 
		} 
		force *= 1 / attenuation; 
	} 
	/* ==== document.body dimensions ==== */ 
	function resize () { 
		if( typeof( window.innerWidth ) == 'number' ) { 
			nw = window.innerWidth; 
			nh = window.innerHeight; 
		} else if( document.documentElement && document.documentElement.clientHeight ) { 
			nw = document.documentElement.clientWidth; 
			nh = document.documentElement.clientHeight; 
		} else if( document.body && document.body.clientHeight ) { 
			nw = document.body.clientWidth; 
			nh = document.body.clientHeight; 
		} 
	} 
 
	/* //////////// ==== public methods ==== //////////// */ 
	return { 
		/* ==== initialize script ==== */ 
		init : function (t, f, a) { 
			tags = t; 
			force = f; 
			attenuation = a; 
			traverseDom(document.body); 
			N = P.length; 
			resize(); 
			pos(); 
			/* ---- window events ---- */ 
			addEvent(window, 'resize', resize); 
			addEvent(window.document, 'mousemove', move); 
		} 
	} 
}(); 
 
/* ==== init parallax engine ==== */ 
onload = function () { 
	prx.init("DIV IMG A SPAN", 2, 1.2); 
} 
 
/* 
	Syntax 1: imbricate HTML tags 
		<div> 
			Parallax Level 1 
			<div> 
				Parallax Level 2 
				<div> 
					Parallax Level 3 
				</div> 
			</div> 
		</div> 
 
	Syntax 2: specify in-line CSS z-index values 
		<div style="z-index:1">Parallax Level 1</div> 
		<div style="z-index:2">Parallax Level 2</div> 
		<div style="z-index:3">Parallax Level 3</div> 
 
	Javascript initialization : 
		prx.init(tags, force, attenuation); 
*/ 
</script> 
</head> 
 
<body> 
 
	<div id="frm"> 
		<img style="z-index:1;width:120%;height:120%;bottom:40%;left:-10%" src="../images/i61.jpg"> 
		<img style="z-index:1;width:120%;height:50%;top:60%;left:-10%" src="../images/i62.jpg"> 
		<img style="z-index:1;top:10%;left:30%;width:12%;height:20%" src="../images/i18.png"> 
		<img style="z-index:1;bottom:30%;left:-5%;width:20%;height:30%" src="../images/i19.png"> 
		<img style="z-index:1;bottom:30%;right:-5%;width:45%;height:45%" src="../images/i20a.png"> 
		<img style="z-index:2;bottom:20%;width:70%;height:30%" src="../images/i9.png"> 
		<img style="z-index:3;left:5%;bottom:5%;width:50%;height:60%" src="../images/i8.png"> 
		<img style="z-index:4;bottom:-10%;left:80%;width:20%;height:50%" src="../images/i23.png"> 
		<img style="z-index:5;bottom:-15%;left:50%;width:45%;height:45%" src="../images/i22.png"> 
		<img style="z-index:7;top:-20%;left:50%;height:140%;width:70%" src="../images/i3.png"> 
		<img style="z-index:6;top:-20%;left:20%;height:140%;width:10%" src="../images/i24.png"> 
	</div> 
 
	<span class="t1" style="bottom:85%">PARALLAX 
		<span class="t2">III</span> 
	</span> 
	<a href="http://www.dhteumeuleu.com/" class="t1" style="top:85%">dhtml 
		<span class="t2">demos</span> 
	</a> 
 
</body> 
</html>

Tagged with: parallax