dhteumeuleu » so touched

so touched

On December 1, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/parallax-X.html
Latest revision: January 10, 2010
- converted to HTML strict mode

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>parallaX - 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 { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		left: 50%; 
		top: 50%; 
		width: 600px; 
		height: 400px; 
		margin-left: -300px; 
		margin-top: -200px; 
		overflow: hidden; 
		background: #000; 
		outline: #FFF solid 50px; 
	} 
	#screen img { 
		position: absolute; 
		left: -2000px; 
	} 
</style> 
 
<script type="text/javascript"> 
// =============================================================== 
//            -------- parallax 3D scrolling ------ 
// script written by Gerard Ferrandez - Ge-1-doot - December 2005 
// http://www.dhteumeuleu.com 
// thanks to UncageArtist for the idea :) 
// =============================================================== 
 
var cx=0; 
var cy=0; 
var xm=0; 
var ym=0; 
var scr; 
var img; 
 
function parallax(rx, ry){ 
	var pos = function(i, x, y) { 
		img[i].style.left = Math.round(x) + "px"; 
		img[i].style.top  = Math.round(y) + "px"; 
	} 
	pos(0,-20+(rx/2),-80+(ry*2)); 
	pos(1,-40+(rx/2),20+(ry/2)); 
	pos(2,-20+(rx/3),90+(ry/3)); 
	pos(3,-20-(rx/2),130-(ry/2)); 
	pos(4,0-rx,160-ry); 
	pos(5,240-rx*2,220-ry*2); 
} 
 
function mainloop(){ 
	cx+=Math.round((xm-cx)/10); 
	cy+=Math.round((ym-cy)/10); 
	parallax( 
		-((scr.offsetWidth/2)-cx)/7, 
		-((scr.offsetHeight/2)-cy)/4.75 
	); 
	setTimeout(mainloop, 16); 
} 
 
onload = function(){ 
	scr = document.getElementById("screen"); 
	img = scr.getElementsByTagName("img"); 
	parallax(0,0); 
	scr.onmousemove = function(e){ 
		if (window.event) e = window.event; 
		xm = -scr.offsetLeft + (e.x || e.clientX); 
		ym = -scr.offsetTop + (e.y || e.clientY); 
	} 
	mainloop(); 
} 
 
</script> 
</head> 
 
<body> 
	<div id="screen"> 
		<img src="../images/is05.jpg"> 
		<img src="../images/is04.gif"> 
		<img src="../images/is03.gif"> 
		<img src="../images/is02.gif"> 
		<img src="../images/is01.gif"> 
		<img src="../images/is07.gif"> 
	</div> 
</body> 
 
</html>

Tagged with: 3D • parallax