Visual_Demos/404-acid.html at master · benjaminplanche/Visual_Demos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
	<head>
        	<meta charset="utf-8" />
        	<meta content="Benjamin Bill Planche" name="author">
		<meta content="Portfolio of Benjamin (Bill) Planche, aka Aldream. About image processing, computer graphics, web experiments,..." name="description">
		<meta content="aldream, benjamin, planche, demo, web, image, graphics, 404, sandbox" name="keywords">
		<meta content="index,follow" name="robots">
	        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	        <title>Aldream - 404-Acid</title>
	        <meta name="viewport" content="width=device-width">
	</head>
	<body>
		<div style="text-align:justify;font-size:2em;width:25em;margin:auto;padding:auto;">
			<h1>Aldream.net</h1>
			<p>4.0.4 Error #404 - Warning</p>
			<p style="float:right;width:30%;font-size:.8em;margin:.1em;text-decoration:line-through;">From this day ten thousand years ago a force of evil so grand...</p>
			<p style="float:left;text-align:right;width:40%;font-size:.9em;font-style:oblique;">You tried to slip through the web, don't you? To split the pixel, to pierce greater Ajax, to take a look behind the Canvas... Don't follow thix path, <em>this.isMadness()</em>. Stand unresponsive to such a design. There are places men should not cross/browse. Places filled with overflowing stacks of artifacts from ancient times, made by .gif-ted wizards. Sometimes you can still discern their incantations - echo.</p>
			<p style="text-align:center;font-size:0.8em;direction:rtl;font-style:italic;">Lorem ipsum dolor, consectetur adipiscing elit. Suspendisse orci neque, hendrerit id euismod vitae. Not Found. The requested URL /[name of the file] was not found on this server. Phasellus id erat non erat vestibulum tristique ac eu lacus.</p>
			<p style="float:right;font-size:1.1em;margin:-1em;"><strong>Fool! I AM THE WEASEL!</strong></p>
			<p style="float:left;margin:-1em;font-size:.5em;">Lolcats come here to die.</p>
			<p style="margin:-.2em;text-align:justify;font-size:0.85em;font-style:italic;">Curabitur a vehicula sapien. Integer <small>Please leave while you can</small> porttitor erat sed felis dapibus sodales. Phasellus <small>too late, too late, it has always been...</small> adipiscing facilisis urna ac auctor.</p>
			<p>You're not another brick in the DOM, another chip in the herd. Through your sockets, Life and soul transpire.</p><p style="margin:0;text-align:center;">Semantic me away</p>
		</div>
	</body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
	<script type="text/javascript" src="http://raw.github.com/infusion/jQuery-xcolor/master/jquery.xcolor.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function() {
			(function() {
				var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
					  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
				window.requestAnimationFrame = requestAnimationFrame;
			})();

			function TraverseChildNodes(node, callback) {
				var next;
				if (node.nodeType === 1) { // (Element node)
					if (node = node.firstChild) {
						do {
							// Recursively call TraverseChildNodes on each child node
							next = node.nextSibling;
							TraverseChildNodes(node, callback);
						} while(node = next);
					}
				} else if (node.nodeType === 3) { // (Text node)
					callback(node);
				}

			}

			function SpanSplit(node) {
				var temp = document.createElement('div');
				temp.innerHTML = '<span style="position:relative;">' + node.data.split('').join('</span><span style="position:relative;">') + '</span>';
				// Extract produced nodes and insert them before original textNode:
				var p = node.parentNode;
				while (temp.firstChild) {
					node.parentNode.insertBefore(temp.firstChild, node);
				}
				// Remove original text-node:
				node.parentNode.removeChild(node);
			}

			var distValues = [];
			var middlePosition = { x: Math.round($('div').width()/2), y: Math.round($('div').height()/2)};
			var dim = { x: $('div').width(), y: $('div').height()};
			var timer = 0;
			function animate() {

				requestAnimationFrame( animate );

				var orig = { x: timer*dim.x/100, y: timer*dim.y/100 };

				// Apply the psyche transform depending on the distance to the chosen point:
				distValues.forEach(function (spanList, dist, array) {
					var coef = dist * timer;
					var coef17 = coef*0.00017;
					var coef83 = coef*0.00083;
					var cos17 = Math.cos(coef17);
					var left = (Math.round(cos17*10))+'px';
					var top = (Math.round(Math.sin(coef17)*10))+'px';

					var r = 127+Math.round(cos17*127);
					var g = 127+Math.round(Math.cos(coef83)*127);
					var b = 127+Math.round(Math.sin(coef83)*127);
					var color = 'rgb('+r+','+g+','+b+')';
					spanList.forEach(function (span, id, array) {
						span.css('color', color);
						span.css('left', left);
						span.css('top', top);
					});
				});

				$( 'a span' ).each(function() {
					$(this).css('color', $.xcolor.darken($(this).css('color'), 2)); // Let's make the links stand out a bit, if you want to escape.
				});

				timer += 0.2;
			}

			// Split the data and for each letter, calculate its position:
			TraverseChildNodes($('div')[0], SpanSplit);
			$( 'span' ).each(function( index ) {
				var x = Math.round($(this).position().left - middlePosition.x);
				var y = Math.round($(this).position().top - middlePosition.y);
				var dist = Math.round(Math.sqrt(x*x+y*y));
				if (distValues[dist] == null) {
					distValues[dist] = [$(this)];
				}
				else {
					distValues[dist].push($(this));
				}
				$(this).attr('x', x);
				$(this).attr('y', y);
				$(this).attr('dist', dist);
			});

			animate();
		});
	</script>
</html>