dhteumeuleu » jar

jar

On April 13, 2003, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>jar - 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%; 
	} 
	img { 
		position:absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
	span { 
		position:absolute; 
		overflow:hidden; 
	} 
</style> 
 
<script type="text/javascript"> 
// =================================================== 
//   __|     _ |     |           | 
//  (_ |  -_)  |  _` |  _ \  _ \  _| 
// \___|\___| _|\__,_|\___/\___/\__| 
// --------------------------------------------------- 
// script: Gerard Ferrandez - Ge-1-doot - APR 2oo3 
// http://www.dhteumeuleu.com 
// =================================================== 
 
var T   = new Array(), 
    N   = 64, 
    xm  = 0, 
    ym  = 0, 
    nx  = 0, 
    nx2 = 0, 
    ny  = 0, 
    L   = 0, 
    H   = 0, 
    MM  = false, 
    xb  = 0, 
    yb = 0; 
 
 
function CreateTrancheImg(i){ 
	this.obj = document.createElement("span"); 
	this.img = document.createElement("img"); 
	this.img.src = document.getElementById("ge1doot").src; 
	this.obj.appendChild(this.img); 
	document.body.appendChild(this.obj); 
} 
 
function resize(){ 
	if(MM){ 
		nx  = document.body.offsetWidth; 
		ny  = document.body.offsetHeight; 
		nx2 = nx / 2; 
		L   = nx - Math.round(nx / 3); 
		H   = Math.floor(ny / N); 
		for(var i=0;i<N;i++){ 
			var t = T[i]; 
			t.obj.style.left   = Math.round((nx - L) / 2)+"px"; 
			t.obj.style.top    = Math.round((H + 1) * i)+"px"; 
			t.obj.style.height = Math.round(H)+"px"; 
			t.obj.style.width  = Math.round(L)+"px"; 
			t.img.style.top    = Math.round(-(ny / N) * i)+"px"; 
			t.img.style.width  = Math.round(L)+"px"; 
			t.img.style.height = Math.round(ny)+"px"; 
		} 
	} 
} 
onresize = resize; 
 
onload = function() { 
	for(var i=0;i<N;i++)T[i] = new CreateTrancheImg(i); 
	MM = true; 
	resize(); 
	document.onmousemove = function(e){ 
		if (window.event) e = window.event; 
		xm = (e.x || e.clientX); 
		ym = (e.y || e.clientY); 
		var x  = Math.round(ym / (H + 1)); 
		if (x != xb) { 
			var y = Math.abs(xm - nx2); 
			var yp = y; 
			var sy = (yb - y) / Math.abs(x - xb); 
			while (x != xb) { 
				if(xb > x) xb--; else xb++; 
				var t = T[xb]; 
				t.obj.style.left  = Math.round(nx2 - Math.abs(yp))+"px"; 
				t.obj.style.width = Math.round(2 * Math.abs(yp))+"px"; 
				t.img.style.width = Math.round(2 * Math.abs(yp))+"px"; 
				yp -= sy; 
			} 
			yb = y; 
		} 
	} 
} 
</script> 
</head> 
 
<body> 
 
<img id="ge1doot" style="display: none" src="../images/skullB.jpg"> 
 
</body> 
</html>

Tagged with: deform