dhteumeuleu » distance and perception

distance and perception

On February 1, 2008, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/diapo-SH.html
Updated: Jan 22, 2010 – Largely simplified the code…

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>distance and perception - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #111; 
		width: 100%; 
		height: 100%; 
	} 
	#slider { 
		position: absolute; 
		width: 820px; 
		height: 333px; 
		left: 50%; 
		top: 50%; 
		margin-left: -430px; 
		margin-top: -186px; 
		overflow: hidden; 
		background: #000; 
		border: 20px solid #000; 
	} 
	#slider .slide { 
		position: absolute; 
		top: 0px; 
		height: 333px; 
		width: 500px; 
		background: #000; 
		overflow: hidden; 
		border-left: #000 solid 1px; 
		cursor: default; 
	} 
	#slider .title   { 
		color: #F80; 
		font-weight: bold; 
		font-size: 1.2em; 
		margin-right: 1.5em; 
		text-decoration: none; 
	} 
	#slider .backgroundText { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		top: 100%; 
		background: #000; 
		filter: alpha(opacity=40); 
		opacity: 0.4; 
	} 
	#slider .text { 
		position: absolute; 
		top: 1%; 
		top: 100%; 
		color: #FFF; 
		font-family: verdana, arial, Helvetica, sans-serif; 
		font-size: 0.9em; 
		text-align: justify; 
		width: 470px; 
		left: 10px; 
	} 
	#slider .diapo { 
		position: absolute; 
		visibility: hidden; 
	} 
</style> 
 
<script type="text/javascript"> 
// ======================================================== 
//              ===== images slider ==== 
// script: Gerard Ferrandez - Ge-1-doot - February 2008 
// http://www.dhteumeuleu.com 
// CC-BY-NC 
// ======================================================== 
 
/* ==== slider nameSpace ==== */ 
var slider = function() { 
	/* ==== private methods ==== */ 
	function getElementsByClass(object, tag, className) { 
		var o = object.getElementsByTagName(tag); 
		for ( var i = 0, n = o.length, ret = []; i < n; i++) { 
			if (o[i].className == className) ret.push(o[i]); 
		} 
		if (ret.length == 1) ret = ret[0]; 
		return ret; 
	} 
	var slides = []; 
	var S, S0, iW, iH, oP, oc, frm, NF, view, Z; 
	var wh, ht, wr, r, mx, mn; 
	/* ==== animation loop ==== */ 
	var run = function () { 
		Z += (mn - Z) * .5; 
		view.calc(); 
		var i = NF; 
		while (i--) slides[i].move(); 
	} 
	/* ==== resize  ==== */ 
	var resize = function () { 
		wh = oc.clientWidth; 
		ht = oc.clientHeight; 
		wr = wh * iW; 
		r  = ht / wr; 
		mx = wh / NF; 
		mn = (wh * (1 - iW)) / (NF - 1); 
	} 
 
	/* ==== Slide Constructor ==== */ 
	Slide = function (N) { 
		this.N      = N; 
		this.x0     = this.x1 = N * mx; 
		this.v      = 0; 
		this.loaded = false; 
		this.cpt    = 0; 
		this.start  = new Date(); 
		this.obj    = frm[N]; 
		this.txt    = getElementsByClass(this.obj, 'div', 'text'); 
		this.img    = getElementsByClass(this.obj, 'img', 'diapo'); 
		this.bkg    = document.createElement('div'); 
		this.bkg.className = 'backgroundText'; 
		this.obj.insertBefore(this.bkg, this.txt); 
		if (N == 0) this.obj.style.borderLeft = 'none'; 
		this.obj.style.left = Math.floor(this.x0) + 'px'; 
		/* ==== mouse events ==== */ 
		this.obj.parent = this; 
		this.obj.onmouseover = function() { 
			this.parent.over(); 
			return false; 
		} 
	} 
	/* ==== target positions ==== */ 
	Slide.prototype.calc = function () { 
		for (var i = 0; i <= this.N; i++) 
			slides[i].x1 = i * Z; 
		for (var i = this.N + 1; i < NF; i++) 
			slides[i].x1 = wh - (NF - i) * Z; 
	} 
	/* ==== HTML animation : move slides ==== */ 
	Slide.prototype.move = function() { 
		var s = (this.x1 - this.x0) / S; 
		/* ==== lateral slide ==== */ 
		if (this.N && Math.abs(s) > .5) 
			this.obj.style.left = Math.floor(this.x0 += s) + 'px'; 
		/* ==== vertical text ==== */ 
		var v = (this.N < NF - 1) ? slides[this.N + 1].x0 - this.x0 : wh - this.x0; 
		if (Math.abs(v - this.v) > .5) { 
			this.bkg.style.top = this.txt.style.top = Math.floor(2 + ht - (v - Z) * iH * r) + 'px'; 
			this.v = v; 
			this.cpt++; 
		} else { 
			if (!this.pro) { 
				/* ==== adjust speed ==== */ 
				this.pro = true; 
				var tps = new Date() - this.start; 
				if(this.cpt > 1) { 
					S = Math.max(2, (28 / (tps / this.cpt)) * S0); 
				} 
			} 
		} 
		if (!this.loaded) { 
			if (this.img.complete) { 
				this.img.style.visibility = 'visible'; 
				this.loaded = true; 
			} 
		} 
	} 
	/* ==== over ==== */ 
	Slide.prototype.over = function () { 
		resize(); 
		view = this; 
		this.start = new Date(); 
		this.cpt = 0; 
		this.pro = false; 
		this.calc(); 
	} 
	/* ==== start script ==== */ 
	var init = function (oCont, speed, iw, ih, op) { 
		S   = S0 = speed; 
		iW  = iw; 
		iH  = ih; 
		oP  = op; 
		oc  = document.getElementById(oCont); 
		frm = getElementsByClass(oc, 'div', 'slide'); 
		NF  = frm.length; 
		resize(); 
		for (var i = 0; i < NF; i++) 
			slides[i] = new Slide(i); 
		view = slides[0]; 
		Z = mx; 
		setInterval(run, 32); 
	} 
	/* ==== public methods ==== */ 
	return { 
		init : init 
	} 
}(); 
 
</script> 
</head> 
 
<body> 
	<div id="slider"> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf10.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">The best</span> 
				  The offspring of a customized orbiter, Oïkostem arose as the best balanced 
				  home for our plans. So we submitted to its conditions. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf14.jpg" alt=""> 
			<div class="text"> 
				<span class="title">Prototype</span> 
				Oïkostem's deep impulse flow is selectively regulated by a molecule 
				originated in the prototype model, that creates its own variational 
				principles, as oriented by the first local generation of terminable androids. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf24.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">Has been reduced</span> 
				  Paired hosts come out nicely after only two cycles now. Their size has been 
				  reduced to a half the original as planned, and indeed they show an 
				  evolutionary advantage in the process of fixing self-generated instructions. 
				  Plus, they are beautiful. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf04.jpg" alt=""> 
			<div class="text"> 
				<span class="title">By close-alikes</span> 
				Now I have regained hopes in someday finding myself surrounded by 
				close-alikes to us. However, they will not be audible, at least not in my 
				life span. We resolved the low freq vibration a superior solution for our 
				communicational goals ... 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf01.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">To bear</span> 
				  We did not expect their surface to produce such a carbon powder coat, though 
				  this is the best model so far. I shall have to bear with the inconveniences. 
				  They seem to establish a parallel communication through that carbon coat and 
				  I find myself unable to decodify the signal into anything meaningful. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf15.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">The zero level</span> 
				  Today a set of vibration came up from the zero level;  we expect to launch 
				  the transitional program in no longer than five basetime units. Psykesoma® 
				  galore and we'll betray our very nature into infinite, unending 2D surfaces. 
				  We do need that vibration, and we will conquer its source. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf41.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">Beautifully</span> 
				  To keep my sanity I wear the tactile sensors all the time. They translate 
				  beautifully; I can even see distances while still on Psykesoma. This was 
				  quite a discovery. We have grown more adaptable than expected. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf26.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">Uneasy to match</span> 
				  Yewoona had to travel farther and longer than I did. Her base orbiter was 
				  set to keep a complex combinational path that made it uneasy to match our 
				  circuits. But her nature showed stronger than programmed. 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf50.jpg" alt=""> 
			<div class="text"> 
				  <span class="title">Adapted to serve</span> 
				  Keep feeding them. We will never be this lucky again; an autogenerated 
				  species adapted to serve all our needs! 
			</div> 
		</div> 
		<div class="slide"> 
			<img class="diapo" src="../images/sf19.jpg" alt=""> 
			<div class="text"> 
				  <a class="title" href="http://www.dhteumeuleu.com">At soonest</a> 
				  "Blood is dark red, iron dark blue, this tale is blissful and so are you". I 
				  should get to the hotel at soonest. The agency guy must be there already, 
				  with some luck we'll have some nice dinner on him. How's that? 
			</div> 
		</div> 
	</div> 
 
<script type="text/javascript"> 
/* ==== start script ==== */ 
// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio 
slider.init("slider", 12, 1.84/3, 1/3.2); 
</script> 
</body> 
</html>

Tagged with: diapo