www.dhteumeuleu.com

parallax-III.html

Donation

Do you like this code ? Is it worth one or two dollars ? Any donation is appreciated !
Thank you for your support :)
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="i61.jpg">
		<img style="z-index:1;width:120%;height:50%;top:60%;left:-10%" src="i62.jpg">
		<img style="z-index:1;top:10%;left:30%;width:12%;height:20%" src="i18.png">
		<img style="z-index:1;bottom:30%;left:-5%;width:20%;height:30%" src="i19.png">
		<img style="z-index:1;bottom:30%;right:-5%;width:45%;height:45%" src="i20a.png">
		<img style="z-index:2;bottom:20%;width:70%;height:30%" src="i9.png">
		<img style="z-index:3;left:5%;bottom:5%;width:50%;height:60%" src="i8.png">
		<img style="z-index:4;bottom:-10%;left:80%;width:20%;height:50%" src="i23.png">
		<img style="z-index:5;bottom:-15%;left:50%;width:45%;height:45%" src="i22.png">
		<img style="z-index:7;top:-20%;left:50%;height:140%;width:70%" src="i3.png">
		<img style="z-index:6;top:-20%;left:20%;height:140%;width:10%" src="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>