dhteumeuleu » ballast

ballast

On April 11, 2010, in lab, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/lab/turnon.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
	<title>Neon start</title> 
	<style type="text/css"> 
		body { 
			margin: 0px; 
			padding: 0; 
			background: #222; 
		} 
		#header { 
			width: 840px; 
			height: 40px; 
			margin: 0 auto; 
			padding: 0px; 
			background:#444; 
		} 
		#logo, #footer { 
			width: 840px; 
			height: 80px; 
			margin: 0 auto; 
			background:#ff8000; 
		} 
		#logo li { 
			float: left; 
			background: #fff; 
			width: 200px; 
			height: 32px; 
			margin: 20px; 
		} 
		#menu { 
			float: left; 
			width: 600px; 
			height: 60px; 
		} 
		#menu ul, #logo ul { 
			margin: 0; 
			padding: 0px; 
			list-style: none; 
			line-height: normal; 
		} 
		#menu li { 
			display: block; 
			float: left; 
			background: #fff; 
			width: 80px; 
			height: 18px; 
			margin-left: 20px; 
			margin-top: 10px; 
		} 
		#page { 
			width: 800px; 
			margin: 0 auto; 
			padding: 0px 20px 0px 20px; 
			background:#000; 
		} 
		#content { 
			float: left; 
			width: 520px; 
		} 
		.post { 
			width: 540px; 
			margin-bottom: 20px; 
			padding: 20px 0px; 
			background: #FFFFFF; 
		} 
		.thumb { 
			width: 100px; 
			height: 100px; 
			margin-left: 20px; 
			background:#888; 
		} 
		#sidebar { 
			float: right; 
			width: 240px; 
		} 
		#sidebar ul { 
			margin: 0; 
			padding: 0; 
			list-style: none; 
			line-height: normal; 
			border: none; 
		} 
		#sidebar li { 
			margin-bottom: 20px; 
			padding: 10px 0px 10px 0px; 
			background: #aaa; 
			height: 60px; 
		} 
		.neon, .post { 
			visibility: hidden; 
		} 
	</style> 
</head> 
<body> 
	<div id="logo" class="neon"> 
		<ul><li class="neon"></li></ul> 
	</div> 
	<div id="header" class="neon"> 
		<div id="menu"> 
			<ul> 
				<li class="neon"></li> 
				<li class="neon"></li> 
				<li class="neon"></li> 
				<li class="neon"></li> 
				<li class="neon"></li> 
			</ul> 
		</div> 
	</div> 
	<div id="page"> 
		<div id="content"> 
			<div class="post"><div class="thumb"></div></div> 
			<div class="post"><div class="thumb"></div></div> 
			<div class="post"><div class="thumb"></div></div> 
		</div> 
		<div id="sidebar"> 
			<ul> 
				<li class="neon"></li> 
				<li class="neon"></li> 
				<li class="neon"></li> 
				<li class="neon"></li> 
			</ul> 
		</div> 
		<div style="clear: both;"> </div> 
	</div> 
	<div id="footer" class="neon"></div> 
 
 
 
<script type="text/javascript"> 
// ============================================================= 
//           ===== neon start experiment ===== 
// script written by Gerard Ferrandez - April 11, 2010 
// http://www.dhteumeuleu.com 
// use under CC-BY-NC license 
// ============================================================= 
var turn = function () { 
	var T = []; 
	var speed, duration; 
	var start = function (i) { 
		setTimeout( function() { 
			neon(i); 
		}, Math.round( speed * i )); 
	} 
	var neon = function (i) { 
		var o = T[i]; 
		o.style.visibility = (o.style.visibility == "hidden") ? "visible" : "hidden"; 
		if (o.ncli++ < duration) setTimeout( function() { 
			neon(i); 
		}, Math.round(Math.random() * o.ncli * o.ncli)); 
		else o.style.visibility = "visible"; 
	} 
	return { 
		on : function (s, d, tag, className) { 
			speed = s; 
			duration = d; 
			var j = 0, k = 0, t; 
			while (t = tag[k++]) { 
				t = document.getElementsByTagName(t); 
				var i = 0, ti; 
				while (ti = t[i++]) { 
					var l = 0, c; 
					while (c = className[l++]) { 
						if (ti.className.indexOf(c) >= 0) { 
							T[j] = ti; 
							T[j].ncli = 4; 
							start(j++); 
						} 
					} 
				} 
			} 
		} 
	} 
}(); 
 
turn.on( 
	300, 24, 
	['div', 'li'], // tagNames 
	['neon', 'post'] // classNames 
); 
</script> 
</body> 
</html>