dhteumeuleu » to see her

to see her

On January 1, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/parallax-X.html
Image courtesy of Olivier Ottner: wwww.naturemorphosis.com
Latest revision: January 12, 2010
- prototyped anim function

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>to see her - 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: #111; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		left: 0px; 
		top: 0px; 
		width: 100%; 
		height: 100%; 
		background: #000; 
	} 
	#SP { 
		position: absolute; 
		left: 50%; 
		top: 50%; 
	} 
	#screen span { 
		position: absolute; 
		left: -1000px; 
		overflow: hidden; 
	} 
	#screen img  { 
		position: absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
	} 
	#credit { 
		position: absolute; 
		color: #888; 
		font-family: verdana, arial, helvetica, sans-serif; 
		font-size: 0.8em; 
		right: 1em; 
		text-align: right; 
		bottom: 2px; 
	} 
	a {text-decoration: none;color:#fff;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#fff;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
</style> 
<script type="text/javascript"> 
// ==================================================== 
// script: Gerard Ferrandez - Ge-1-doot - JANUARY 2005 
// http://www.dhteumeuleu.com/ 
// GFX oliver ottner: http://www.naturemorphosis.com/ 
// ==================================================== 
 
document.onselectstart = new Function("return false"); 
 
var nx  = 0; 
var ny  = 0; 
var xm  = 0; 
var ym  = -1000000; 
var S   = 0; 
var O   = 0; 
var M   = 10; 
var H; 
var W; 
var img; 
var scr; 
 
//////////////////// 
var RAD  = 2; 
var Nx   = 12; 
var Ny   = 14; 
var visc = .01; 
//////////////////// 
 
function CObj(parent, x, y){ 
	var o = document.createElement("span"); 
	o.style.width = Math.round(W + 2) + 'px'; 
	o.style.height = Math.round(H + 2) + 'px'; 
	var i = document.createElement("img"); 
	i.src = img.src; 
	i.style.left = Math.round(-x * W) + 'px'; 
	i.style.top = Math.round(-y * H) + 'px'; 
	o.appendChild(i); 
	document.getElementById("SP").appendChild(o); 
	x = -(Nx / 2) * W + (x * W); 
	y = -(Ny / 2) * H + (y * H); 
	this.obj  = o.style; 
	this.x    = x; 
	this.y    = y; 
	this.x0   = x; 
	this.y0   = y; 
	this.parent = parent; 
} 
 
CObj.prototype.anim = function () { 
	this.dx = xm - this.x; 
	this.dy = ym - this.y; 
	var d = Math.sqrt(this.dx * this.dx + this.dy * this.dy); 
	this.x = this.x - S / d * (this.dx / d) + (this.x0 - this.x) * visc; 
	this.y = this.y - S / d * (this.dy / d) + (this.y0 - this.y) * visc; 
	this.obj.left = Math.round(this.x) + 'px'; 
	this.obj.top  = Math.round(this.y) + 'px'; 
	if(this.parent) this.parent.anim(); 
} 
 
function run(){ 
	O.anim(); 
} 
 
document.onmousemove = function(e){ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX) - scr.offsetLeft - nx; 
	ym = (e.y || e.clientY) - scr.offsetTop - ny; 
} 
 
function resize(){ 
	nx = scr.offsetWidth * .5; 
	ny = scr.offsetHeight * .5; 
} 
onresize = resize; 
 
onload = function(){ 
	img = document.getElementById("IMG"); 
	scr = document.getElementById("screen"); 
	resize(); 
	W = img.width / Nx; 
	H = img.height / Ny; 
	S = img.width * RAD; 
	for(var y = 0; y < Ny; y++) 
		for(var x = 0; x < Nx; x++) 
			O = new CObj(O, x, y); 
	setInterval(run, 16); 
} 
</script> 
</head> 
<body> 
 
<div id="screen"> 
	<div id="SP"></div> 
	<div id="credit">digital image © oliver ottner: 
	<a href="http://www.naturemorphosis.com/">wwww.naturemorphosis.com</a></div> 
</div> 
 
<img id="IMG" src="../images/nm12a.jpg" alt="" style="visibility:hidden"> 
 
</body> 
</html>

Tagged with: deform