dhteumeuleu » the promise

the promise

On February 11, 2000, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>the promise - 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; 
		top:-1000px; 
	} 
</style> 
 
<script type="text/javascript"> 
// ======================================================= 
// script by Gerard Ferrandez - ge1doot - feb 2000 
// http://www.dhteumeuleu.com 
// ======================================================= 
 
object = new Array(); 
var R,xm,ym; 
var kr = Math.PI/180; 
 
function CObj(N,obj,pr,pk){ 
	this.img = document.createElement("img"); 
	this.img.src = obj.src; 
	this.img.style.zIndex = -pk; 
	document.body.appendChild(this.img); 
	this.dL   = this.img.width  / 2; 
	this.dH   = this.img.height / 2; 
	this.N    = N; 
	this.sens = 1; 
	this.xmb  = 0; 
	this.r    = 0; 
	this.k    = 0; 
	this.pk   = pk; 
	this.pr   = pr; 
	this.x    = xm; 
	this.y    = ym; 
} 
CObj.prototype.dhTeuMeulEu = function (){ 
	var css = this.img.style; 
	css.left = Math.round(this.x - this.dL + Math.cos((this.k -= this.pk * this.sens) * kr) * (this.r += this.pr))+"px"; 
	css.top  = Math.round(this.y - this.dH - (this.r * .5) + Math.sin(this.k * kr) * this.r)+"px"; 
	if(this.r > R + 2 * this.N){ 
		this.y    = ym; 
		this.x    = xm; 
		this.r    = 0; 
		this.sens = xm>this.xmb?1:-1; 
		this.xmb  = xm; 
	} 
} 
 
function run(){ 
	var i = 0, o; 
	while (o = object[i++]) 
		o.dhTeuMeulEu(); 
	setTimeout(run, 16); 
} 
onload = function (){ 
	R  = 40; 
	xm = document.body.offsetWidth  / 2; 
	ym = document.body.offsetHeight / 2; 
 
	document.onmousemove = function(e){ 
		if (window.event) e = window.event; 
		xm = (e.x || e.clientX); 
		ym = (e.y || e.clientY) + document.body.scrollTop; 
	} 
	I = document.getElementById("IMG").getElementsByTagName("img"); 
	for(var i=0;i<120;i++){ 
		o = I[i%I.length]; 
		object[i] = new CObj(i, o, 2, 80/o.width); 
	} 
	run(); 
 
} 
</script> 
</head> 
 
<body> 
 
<span id=IMG> 
	<img src="../images/star1d.gif"> 
	<img src="../images/star1c.gif"> 
	<img src="../images/star1b.gif"> 
	<img src="../images/star1e.gif"> 
	<img src="../images/star1a.gif"> 
	<img src="../images/blomst.gif"> 
	<img src="../images/blad.gif"> 
</span> 
 
</body> 
</html>

Tagged with: mousetrail