dhteumeuleu » lead

lead

On December 14, 2001, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/EctoPlasm.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>lead - 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; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		cursor: pointer; 
	} 
	#screen { 
		width:100%; 
		height:100%; 
		position:absolute; 
	} 
	#screen span { 
		position: absolute; 
		overflow: hidden; 
		left: -1000px; 
		font-size: 1px; 
	} 
	#mp { 
		left:-10000px; 
		position:absolute; 
	} 
 
</style> 
 
<script type="text/javascript"> 
// ====================================================== 
// Script by Gerard Ferrandez - Ge-1-doot - Dec 2001 
// DOM crossbrowser version - April 14th, 2006 
// http://www.dhteumeuleu.com 
// ====================================================== 
 
var scr; 
var O; 
var MP; 
var P; 
var xm; 
var ym; 
var mpw; 
var mph; 
var sx = 0; 
var sy = 0; 
var X; 
var Y; 
var drag = false; 
var xd = 0; 
var yd = 0; 
 
 
function CObj(N, parent) { 
	this.S = (N + 1) * P; 
	var o = document.createElement("span"); 
	o.style.width = Math.round(this.S)+'px'; 
	o.style.height = Math.round(this.S)+'px'; 
	var i = document.createElement("img"); 
	i.setAttribute("src",MP.src); 
	i.style.position = "absolute"; 
	i.style.left = -Math.round(mpw/X-this.S/2)+'px'; 
	i.style.top = -Math.round(mph/Y-this.S/2)+'px'; 
	o.appendChild(i); 
	scr.insertBefore(o, scr.firstChild); 
	this.S   = this.S * .5; 
	this.spa = o.style; 
	this.PX  = xm; 
	this.PY  = ym; 
	this.x   = 0; 
	this.y   = 0; 
	this.sx  = 0; 
	this.sy  = 0; 
	this.parent = parent; 
	if (N<NBi) 
		this.O = new CObj(N+1,this); 
} 
CObj.prototype.anim = function () { 
	if (this.parent) { 
		var x0 = this.parent.x; 
		var y0 = this.parent.y; 
	} else { 
		if (drag) { 
			var x0 = xm; 
			var y0 = ym; 
		} else { 
			var x0 = xd+sx; 
			var y0 = yd+sy; 
		} 
	} 
	var ddx = (x0-this.PX) * .5; 
	var ddy = (y0-this.PY) * .5; 
	this.x = this.PX+=ddx; 
	this.y = this.PY+=ddy; 
	this.spa.left = Math.round(this.x - this.S)+'px'; 
	this.spa.top = Math.round(this.y - this.S)+'px'; 
	if (this.O) this.O.anim(); 
} 
 
onload = function(){ 
	scr = document.getElementById("screen"); 
	MP  = document.getElementById("mp"); 
	xd  = xm  = scr.offsetWidth / 2; 
	yd  = ym  = scr.offsetHeight / 2; 
	scr.onmousemove = function(e){ 
		if(window.event) e=window.event; 
		xm=(e.x || e.clientX); 
		ym=(e.y || e.clientY); 
		sx = 0; 
		sy = 0; 
	} 
	scr.onselectstart = function () { return false; } 
	scr.ondrag        = function () { return false; } 
	scr.onmousedown   = function () { 
		drag = true; 
		return false; 
	} 
	scr.onmouseup = function () { 
		drag = false; 
		xd = xm; 
		yd = ym; 
		return false; 
	} 
	N = 0; 
	NBi = 100; 
	mpw = MP.width; 
	mph = MP.height; 
	X = 2; 
	Y = 2.2; 
	P = Math.max(mpw, mph)/NBi; 
	O = new CObj(0); 
	setInterval(function() { 
		sx += Math.random() * 4 - 2; 
		sy += Math.random() * 4 - 2; 
		O.anim(); 
	}, 16); 
} 
 
</script> 
</head> 
 
<body> 
<div id="screen"></div> 
<img id="mp" src="../images/GU1.jpg"> 
 
</body> 
</html>

Tagged with: deform