dhteumeuleu » through

through

On January 10, 2000, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>through - 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: #fff; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		filter: alpha(opacity=100); 
	} 
	span { 
		display: none; 
	} 
	img { 
		width: 0px; 
		position: absolute; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
	#txt { 
		font-weight: bold; 
		filter: alpha(opacity=30); 
		opacity:0.3; 
		width: 100%; 
		font-family: verdana; 
		position: absolute; 
		text-align: center; 
	} 
</style> 
 
<script type="text/javascript"><!-- 
// =================================================== 
// script by Gerard Ferrandez - ge1doot - march 2000 
// http://www.dhteumeuleu.com 
// =================================================== 
 
var TXT, IMG, TAF; 
sw = 0; 
nx = 0; 
ny = 0; 
nI = 0; 
t  = 0; 
c  = 0; 
 
function resize() { 
	nx = document.body.offsetWidth; 
	ny = document.body.offsetHeight; 
} 
onresize = resize; 
 
function swap() { 
	var r = Math.round(Math.random()*nI); 
	var x = Math.round(nx * (Math.random() + 1)); 
	var y = Math.round(ny * (Math.random() + 1)); 
	var css = IMG[r].style; 
	css.zIndex = c++; 
	css.width  = x+"px"; 
	css.height = y+"px"; 
	css.left   = Math.round((nx - x) / 2)+"px"; 
	css.top    = Math.round((ny - y) / 2)+"px"; 
	setTimeout(swap,16); 
} 
 
function afftxt(){ 
	var o = TXT[(t++)%TXT.length] 
	var tx = o .innerHTML; 
	TAF.innerHTML = tx; 
	var y = (nx/tx.length) * 1.2; 
	var css = TAF.style; 
	css.top = Math.round((ny/2) - (y/2) - (y/6))+"px"; 
	css.fontSize = Math.round(y)+"px"; 
	css.zIndex = c+1000; 
	css.color = o.style.color; 
	setTimeout(afftxt, 1000); 
} 
 
onload = function() { 
	IMG = document.body.getElementsByTagName("img"); 
	TXT = document.body.getElementsByTagName("span"); 
	TAF = document.getElementById("txt") 
	nI = IMG.length-1; 
	resize(); 
	swap(); 
	afftxt(); 
} 
//--> 
</script> 
</head> 
 
<body> 
 
<img src="../images/encaged sun.jpg"> 
<img src="../images/skullB.jpg"> 
<img src="../images/skullB.jpg"> 
 
<div id="txt"></div> 
 
<span style="color:#FFF"> VISION </span> 
<span style="color:#F00">  IS  </span> 
<span style="color:#F00">EASY</span> 
<span style="color:#FFF">EXECUTION</span> 
<span style="color:#F00">  IS  </span> 
<span style="color:#F00">HARD</span> 
 
</body> 
</html>