Skip to content

Commit 9b423c2

Browse files
remyremy
committed
+www
1 parent ed8bc9b commit 9b423c2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+6552
-0
lines changed

‎www/assets/dizzy.mp4

1.52 MB
Binary file not shown.

‎www/assets/dizzy.ogv

1.44 MB
Binary file not shown.

‎www/assets/dizzy.webm

1.63 MB
Binary file not shown.

‎www/assets/remy-and-ellis2.mp4

455 KB
Binary file not shown.

‎www/assets/remy-and-ellis2.webm

188 KB
Binary file not shown.

‎www/canvas-grad/index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset=utf-8 />
5+
<title>Canvas Gradient</title>
6+
<style>
7+
body {
8+
background: #000;
9+
}
10+
canvas {
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
height: 100%;
15+
width: 100%;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<canvas height="600" width="600"></canvas>
21+
<script>
22+
var canvas = document.getElementsByTagName('canvas')[0],
23+
ctx = null,
24+
grad = null,
25+
body = document.getElementsByTagName('body')[0],
26+
color = 255;
27+
28+
if (canvas.getContext('2d')) {
29+
ctx = canvas.getContext('2d');
30+
ctx.clearRect(0, 0, 600, 600);
31+
ctx.save();
32+
// Create radial gradient
33+
grad = ctx.createRadialGradient(0,0,0,0,0,600);
34+
grad.addColorStop(0, '#000');
35+
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
36+
37+
// assign gradients to fill
38+
ctx.fillStyle = grad;
39+
40+
// draw 600x600 fill
41+
ctx.fillRect(0,0,600,600);
42+
ctx.save();
43+
44+
body.onmousemove = function (event) {
45+
var width = window.innerWidth,
46+
height = window.innerHeight,
47+
x = event.clientX,
48+
y = event.clientY,
49+
rx = 600 * x / width,
50+
ry = 600 * y / height;
51+
52+
var xc = ~~(256 * x / width);
53+
var yc = ~~(256 * y / height);
54+
55+
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
56+
grad.addColorStop(0, '#000');
57+
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
58+
// ctx.restore();
59+
ctx.fillStyle = grad;
60+
ctx.fillRect(0,0,600,600);
61+
// ctx.save();
62+
};
63+
}
64+
</script>
65+
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
66+
<script>
67+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
68+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
69+
</script>
70+
<script>
71+
try {
72+
var pageTracker = _gat._getTracker("UA-1656750-18");
73+
pageTracker._trackPageview();
74+
} catch(err) {}</script>
75+
76+
</body>
77+
</html>

‎www/canvas/index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset=utf-8>
5+
<meta name="viewport" content="width=device-width">
6+
<title>HTML5 Demo: Canvas</title>
7+
<link rel="stylesheet" href="/css/html5demos.css">
8+
<script src="/js/h5utils.js"></script></head>
9+
<body>
10+
<section id="wrapper">
11+
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
12+
<header>
13+
<h1>Canvas</h1>
14+
</header>
15+
16+
<article></article>
17+
<script>
18+
19+
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
20+
21+
function buildSpinner(data) {
22+
23+
var canvas = document.createElement('canvas');
24+
canvas.height = 100;
25+
canvas.width = 300;
26+
document.getElementsByTagName('article')[0].appendChild(canvas);
27+
var ctx = canvas.getContext("2d"),
28+
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
29+
30+
for (i = 0; i < degrees; i++) {
31+
degreesList.push(i);
32+
}
33+
34+
// reset
35+
i = 0;
36+
37+
// so I can kill it later
38+
window.canvasTimer = setInterval(draw, 1000/degrees);
39+
40+
function reset() {
41+
ctx.clearRect(0,0,100,100); // clear canvas
42+
43+
var left = degreesList.slice(0, 1);
44+
var right = degreesList.slice(1, degreesList.length);
45+
degreesList = right.concat(left);
46+
}
47+
48+
function draw() {
49+
var c, s, e;
50+
51+
var d = 0;
52+
53+
if (i == 0) {
54+
reset();
55+
}
56+
57+
ctx.save();
58+
59+
d = degreesList[i];
60+
c = Math.floor(255/degrees*i);
61+
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
62+
ctx.lineWidth = data.size;
63+
ctx.beginPath();
64+
s = Math.floor(360/degrees*(d));
65+
e = Math.floor(360/degrees*(d+1)) - 1;
66+
67+
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
68+
ctx.stroke();
69+
70+
ctx.restore();
71+
72+
i++;
73+
if (i >= degrees) {
74+
i = 0;
75+
}
76+
}
77+
}
78+
</script><a id="html5badge" href="http://www.w3.org/html/logo/">
79+
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
80+
</a>
81+
<footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
82+
</section>
83+
<a id="forkme" href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
84+
<script src="/js/prettify.packed.js"></script>
85+
<script>
86+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
87+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
88+
</script>
89+
<script>
90+
try {
91+
var pageTracker = _gat._getTracker("UA-1656750-18");
92+
pageTracker._trackPageview();
93+
} catch(err) {}</script>
94+
</body>
95+
</html>

‎www/classlist/index.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset=utf-8>
5+
<meta name="viewport" content="width=device-width">
6+
<title>HTML5 Demo: Simple classList manipulation</title>
7+
<link rel="stylesheet" href="/css/html5demos.css">
8+
<script src="/js/h5utils.js"></script></head>
9+
<body>
10+
<section id="wrapper">
11+
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
12+
<header>
13+
<h1>Simple classList manipulation</h1>
14+
</header>
15+
16+
<style>
17+
#classListTest {
18+
padding: 5px;
19+
border: 1px solid #ccc;
20+
padding-bottom: 20px;
21+
position: relative;
22+
}
23+
24+
#classListTest:after {
25+
content: 'class: ' attr(class);
26+
position: absolute;
27+
background: #c00;
28+
bottom: 0;
29+
right: 0;
30+
padding: 5px;
31+
color: #fff;
32+
}
33+
34+
.big { font-size: 30px; line-height: 30px; }
35+
.bold { font-weight: bold; }
36+
.pink { background: #FF5E99; color: #fff; }
37+
38+
#status {
39+
background: #c00;
40+
}
41+
</style>
42+
<article>
43+
<p>Clicking the buttons below will toggle the class on the <em>bacon ipsum</em> text below, assigning the class with the same name (styles seen below). This is done using the new <code>classList</code> API.</p>
44+
<p id="status">Not supported :(</p>
45+
<pre><code>&lt;style&gt;
46+
.big { font-size: 30px; }
47+
.bold { font-weight: bold; }
48+
.pink { background: #FF5E99; color: #fff; }
49+
&lt;/style&gt;</code></pre>
50+
<p id="classListTest">Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.</p>
51+
<p id="toggleClass">Toggle a class:
52+
<input type="button" value="big" />
53+
<input type="button" value="bold" />
54+
<input type="button" value="pink" />
55+
</p>
56+
</article>
57+
<script>
58+
// checkfor support
59+
60+
var toggle = document.getElementById('toggleClass'),
61+
test = document.getElementById('classListTest');
62+
63+
if (toggle.classList) {
64+
var supported = document.getElementById('status');
65+
supported.parentNode.removeChild(supported);
66+
// bit of event delegation otherwise we're binding to each input
67+
toggle.addEventListener('click', function (event) {
68+
if (event.target.nodeName == 'INPUT') {
69+
test.classList.toggle(event.target.value);
70+
}
71+
}, false);
72+
} else {
73+
// not supported
74+
}
75+
76+
77+
78+
79+
80+
81+
</script>
82+
83+
84+
85+
86+
87+
88+
89+
90+
<a id="html5badge" href="http://www.w3.org/html/logo/">
91+
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
92+
</a>
93+
<footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
94+
</section>
95+
<a id="forkme" href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
96+
<script src="/js/prettify.packed.js"></script>
97+
<script>
98+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
99+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
100+
</script>
101+
<script>
102+
try {
103+
var pageTracker = _gat._getTracker("UA-1656750-18");
104+
pageTracker._trackPageview();
105+
} catch(err) {}</script>
106+
</body>
107+
</html>

‎www/contenteditable/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset=utf-8>
5+
<meta name="viewport" content="width=device-width">
6+
<title>HTML5 Demo: ContentEditable</title>
7+
<link rel="stylesheet" href="/css/html5demos.css">
8+
<script src="/js/h5utils.js"></script></head>
9+
<body>
10+
<section id="wrapper">
11+
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
12+
<header>
13+
<h1>ContentEditable</h1>
14+
</header>
15+
16+
<article>
17+
<section>
18+
<p>Any elements with the <code>contenteditable</code> attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes.</p>
19+
</section>
20+
<section id="editable" contenteditable="true">
21+
<h2>Go ahead, edit away!</h2>
22+
<p>Here's a typical paragraph element</p>
23+
<ol>
24+
<li>and now a list</li>
25+
<li>with only</li>
26+
<li>three items</li>
27+
</ol>
28+
</section>
29+
<div>
30+
<input type="button" id="clear" value="Clear changes" />
31+
</div>
32+
</article>
33+
<script>
34+
var editable = document.getElementById('editable');
35+
36+
addEvent(editable, 'blur', function () {
37+
// lame that we're hooking the blur event
38+
localStorage.setItem('contenteditable', this.innerHTML);
39+
document.designMode = 'off';
40+
});
41+
42+
addEvent(editable, 'focus', function () {
43+
document.designMode = 'on';
44+
});
45+
46+
addEvent(document.getElementById('clear'), 'click', function () {
47+
localStorage.clear();
48+
window.location = window.location; // refresh
49+
});
50+
51+
if (localStorage.getItem('contenteditable')) {
52+
editable.innerHTML = localStorage.getItem('contenteditable');
53+
}
54+
55+
</script><a id="html5badge" href="http://www.w3.org/html/logo/">
56+
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
57+
</a>
58+
<footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
59+
</section>
60+
<a id="forkme" href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
61+
<script src="/js/prettify.packed.js"></script>
62+
<script>
63+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
64+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
65+
</script>
66+
<script>
67+
try {
68+
var pageTracker = _gat._getTracker("UA-1656750-18");
69+
pageTracker._trackPageview();
70+
} catch(err) {}</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)