dhteumeuleu » pushing up

pushing up

On April 12, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>pushing up - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#obZ { 
		position:absolute; 
		left:5%; 
		top:5%; 
		width:90%; 
		height: 90%; 
		background:#000; 
		overflow: hidden; 
	} 
	#obZ span { 
		position: absolute; 
		cursor: pointer; 
		font-size: 1px; 
		top: 0px; 
		height: 0px; 
		border: #000 solid 1px; 
		cursor: pointer; 
	} 
</style> 
<script type="text/javascript"> 
// ============================================================ 
// script: Gerard Ferrandez - Ge-1-doot - JANNUARY 9th, Y2K+4 
// http://www.dhteumeuleu.com 
// ============================================================ 
 
var O = new Array(); 
///////////////////////////////////////////// 
var L = 10; // span width in % percentage 
var F = 30; // force 
var R = 0; // red 
var G = 1; // Green 
var B = 0; // blue 
var M = "#FFF"; // onmouseover color 
///////////////////////////////////////////// 
var N = Math.round(100/L); 
 
function resize() { ny = document.getElementById("obZ").offsetHeight; } 
onresize = resize; 
 
function touch(o){ 
	var p = O[o]; 
	p.V = -F; 
	p.obj.style.background = M; 
} 
 
function tomb(o){ 
	var p = O[o]; 
	p.H += p.V; 
	p.V++; 
	if(p.H > ny){ 
		p.V = -Math.round(p.V*.8); 
		p.H += p.V; 
	} 
	if(p.H > 0){ 
		p.obj.style.height = Math.round(p.H)+"px"; 
		if(Math.abs(p.H-p.HB) > 0){ 
			var c = p.H*255/ny; 
			p.obj.style.background = "RGB("+Math.round(c*R)+","+Math.round(c*G)+","+Math.round(c*B)+")"; 
			p.HB = p.H; 
		} 
	} else { 
		p.V=1; 
		p.H=0; 
	} 
	setTimeout(function() { 
		tomb(o); 
	}, 32); 
} 
 
function CObj(N){ 
	this.N  = N; 
	this.HB = 0; 
	this.V  = 0; 
	this.H  = 0; 
	this.obj = document.createElement("span"); 
	this.obj.onmouseover = new Function("touch("+N+");"); 
	this.obj.style.width = L+"%"; 
	this.obj.style.left = Math.ceil(N*L)+"%"; 
	document.getElementById("obZ").appendChild(this.obj); 
	setTimeout(function() { 
		tomb(N); 
	}, 48 * N); 
} 
 
onload = function() { 
	resize(); 
	for(var i=0;i<N;i++)O[i] = new CObj(i); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="obZ"></div> 
 
</body> 
</html>

Tagged with: touch