dhteumeuleu » there was sweetness

there was sweetness

On February 1, 2007, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/deform-img.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>there was sweetness - interactive DHTML</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%; 
	} 
	#screen { 
		position:absolute; 
		left: 10%; 
		top: 10%; 
		width: 80%; 
		height: 80%; 
		background: #000; 
		overflow: hidden; 
		cursor: pointer; 
		filter: alpha(opacity=100); 
	} 
	#screen div { 
		position: absolute; 
		overflow: hidden; 
	} 
	#screen img { 
		position: absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
	} 
</style> 
 
<script type="text/javascript"> 
// ================================================== 
//        ===== image deformation ==== 
// script written by Gerard Ferrandez - February 2007 
// http://www.dhteumeuleu.com 
// ================================================== 
 
 
var idf = { 
	//////////////////////////// 
	spring : .96, 
	speedX : 50, 
	speedY : 60, 
	//////////////////////////// 
	xm   : 0, 
	ym   : 0, 
	sx   : 1, 
	sy   : 1, 
	svx  : 0, 
	svy  : 0, 
	xd   : 1, 
	yd   : 1, 
	drag : false, 
 
 
	run : function () { 
		if(idf.drag) { 
			idf.sx = idf.xm; 
			idf.sy = idf.ym; 
		} else { 
			idf.svx = idf.spring * idf.svx - (idf.sx - idf.xd - idf.nx) / idf.speedX; 
			idf.svy = idf.spring * idf.svy - (idf.sy - idf.yd - idf.ny) / idf.speedY; 
			idf.sx += idf.svx; 
			idf.sy += idf.svy; 
		} 
 
		var x0 = Math.max(0, Math.round(idf.sx) - idf.nx); 
		var y0 = Math.max(0, Math.round(idf.sy) - idf.ny); 
		var x1 = Math.max(0, idf.nw - (Math.round(idf.sx) - idf.nx)); 
		var y1 = Math.max(0, idf.nh - (Math.round(idf.sy) - idf.ny)); 
		var x2 = Math.max(0, Math.round((x0 * idf.nw) / idf.xd)); 
		var y2 = Math.max(0, Math.round((y0 * idf.nh) / idf.yd)); 
		var x3 = Math.max(0, Math.round((x1 * idf.nw) / (idf.nw - idf.xd))); 
		var y3 = Math.max(0, Math.round((y1 * idf.nh) / (idf.nh - idf.yd))); 
 
		idf.d[0].width  = x0 + 'px'; 
		idf.d[1].width  = x1 + 'px'; 
		idf.d[2].width  = x0 + 'px'; 
		idf.d[3].width  = x1 + 'px'; 
		idf.d[0].height = y0 + 'px'; 
		idf.d[1].height = y0 + 'px'; 
		idf.d[2].height = y1 + 'px'; 
		idf.d[3].height = y1 + 'px'; 
		idf.i[0].width  = x2 + 'px'; 
		idf.i[1].width  = x3 + 'px'; 
		idf.i[2].width  = x2 + 'px'; 
		idf.i[3].width  = x3 + 'px'; 
		idf.i[0].height = y2 + 'px'; 
		idf.i[1].height = y2 + 'px'; 
		idf.i[2].height = y3 + 'px'; 
		idf.i[3].height = y3 + 'px'; 
 
		/* ==== loop ==== */ 
		setTimeout(idf.run, 16); 
	}, 
 
	mouse : function (e) { 
		this.xm = e.clientX; 
		this.ym = e.clientY; 
	}, 
 
	resize : function () { 
		var o = idf.scr; 
		for (idf.nx = 0, idf.ny = 0; o != null; o = o.offsetParent) idf.nx += o.offsetLeft, idf.ny += o.offsetTop; 
		idf.nw = idf.scr.offsetWidth; 
		idf.nh = idf.scr.offsetHeight; 
	}, 
 
	init : function () { 
		this.scr = document.getElementById('screen'); 
		var div = this.scr.getElementsByTagName('div'); 
		this.d = []; 
		this.i = []; 
		for (var i = 0; i< 4; i++) { 
			this.d[i] = div[i].style; 
			this.i[i] = div[i].getElementsByTagName('img')[0].style; 
		} 
		this.resize(); 
		document.onselectstart = function () { return false; } 
		this.scr.ondrag        = function () { return false; } 
		this.scr.onmousedown   = function () { 
			idf.drag = true; 
			idf.xd = idf.xm - idf.nx; 
			idf.yd = idf.ym - idf.ny; 
			idf.scr.style.cursor = "move"; 
			return false; 
		} 
		document.onmouseup = function () { 
			idf.drag = false; 
			idf.scr.style.cursor = "pointer"; 
			return false; 
		} 
		this.i[3].width =  idf.nw; 
		this.i[3].height = idf.nh; 
		idf.sx = idf.nx; 
		idf.sy = idf.ny; 
		this.run(); 
	} 
 
} 
 
onload = function() { 
	/* ==== window mousemove event ==== */ 
	document.onmousemove = function (e) { 
		if (window.event) e = window.event; 
		idf.mouse(e); 
	} 
	/* ==== window onresize event ==== */ 
	onresize = idf.resize; 
	/* ==== launch script ==== */ 
	idf.init(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
	<div> 
		<img alt="" src="../images/lightindark.jpg"> 
	</div> 
	<div style="right:0px"> 
		<img alt="" src="../images/lightindark.jpg" style="right:0px"> 
	</div> 
	<div style="bottom:0px"> 
		<img alt="" src="../images/lightindark.jpg" style="bottom:0px"> 
	</div> 
	<div style="right:0px;bottom:0px"> 
		<img alt="" src="../images/lightindark.jpg" style="right:0px;bottom:0px"> 
	</div> 
</div> 
 
</body> 
</html>

Tagged with: deform