/
index.html
67 lines (54 loc) · 5.62 KB
/
index.html
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
<!DOCTYPE html>
<meta charset="utf-8">
<title>Instapoppin' 101</title>
<style>
body, html {
width: 45em;
margin: 0 auto;
background: #f0f0f0;
font-family: Futura;
color: #101010;
}
div.chunk.active {
background: yellow !important;
}
p.see-demo {
}
a {
color: inherit;
}
p.see-demo.active {
background: yellow;
}
div.gist {
clear: both;
font-size: 70%;
}
span.subheading {
font-size: 9pt;
font-weight: normal;
}
</style>
<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css">
<script src="popcorn.js"></script>
<script src="instapoppin.js"></script>
<a href="http://github.com/toolness/instapoppin"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/bec6c51521dcc8148146135149fe06a9cc737577/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a><h1>Instapoppin' <span class="subheading">Making Popcorn With Just HTML and CSS</span></h1>
<p>This is similar to the <a href="http://popcornjs.org/popcorn-101">Popcorn 101</a> tutorial, but doesn't require an author to know JavaScript when making web pages that react to web media.</p>
<p class="see-demo" data-active-during="35-"><a href="tutorial/popcorn-101-with-instapoppin.html">See the code in action</a>.</p>
<p>For more detailed technical documentation, see the <a href="https://github.com/toolness/instapoppin#readme">README</a>.</p>
<audio controls autoplay>
<source src="tutorial/101.ogg" type="audio/ogg"></source>
<source src="tutorial/101.mp3" type="audio/mp3"></source>
</audio>
<div id="gist-1289911" class="gist">
<div class="gist-file">
<div class="gist-data gist-syntax">
<div class="gist-highlight"><pre><div class="line" id="LC1"><span class="cp"><!DOCTYPE html></span></div><div class="line" id="LC2"><span class="nt"><html></span></div><div class="line" id="LC3"> <span class="nt"><head></span></div><div class="chunk" data-active-during="6-10"><div class="line" id="LC4"> <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://popcornjs.org/code/dist/popcorn.js"</span><span class="nt">></script></span></div><div class="line" id="LC5"> <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://toolness.github.com/instapoppin/instapoppin.js"</span><span class="nt">></script></span></div></div><div class="line" id="LC6"> <span class="nt"></head></span></div><div class="line" id="LC7"> <span class="nt"><style></span></div><div class="chunk" data-active-during="30-35"><div class="line" id="LC8"> <span class="nc">.footnote</span> <span class="p">{</span> <span class="k">visibility</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span> <span class="p">}</span></div><div class="line" id="LC9"> <span class="nc">.footnote.active</span> <span class="p">{</span> <span class="k">visibility</span><span class="o">:</span> <span class="k">visible</span><span class="p">;</span> <span class="p">}</span></div></div><div class="line" id="LC10"> <span class="nt"></style></span></div><div class="line" id="LC11"> <span class="nt"><body></span></div><div class="line" id="LC12"> <span class="nt"><video</span> <span class="na">height=</span><span class="s">"180"</span> <span class="na">width=</span><span class="s">"300"</span> <span class="na">autoplay</span><span class="nt">></span></div><div class="line" id="LC13"> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"</span><span class="nt">></source></span></div><div class="line" id="LC14"> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"</span><span class="nt">></source></span></div><div class="line" id="LC15"> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"</span><span class="nt">></source></span></div><div class="line" id="LC16"> <span class="nt"></video></span></div><div class="chunk" data-active-during="10-18"><div class="line" id="LC17"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"footnote"</span> <span class="na">data-active-during=</span><span class="s">"2-6"</span><span class="nt">></span>Pop!<span class="nt"></div></span></div></div><div class="line" id="LC18"> <span class="nt"></body></span></div><div class="line" id="LC19"><span class="nt"></html></span></div><div class="line" id="LC20"><br></div></pre></div>
</div>
<div class="gist-meta">
<a href="https://raw.github.com/gist/1290242/964b12ccff6a0ef30607d14bb2dad618ccd664d3/popcorn-101-with-instapoppin.html" style="float:right;">view raw</a>
<a href="https://gist.github.com/1290242#file_popcorn_101_with_instapoppin.html" style="float:right;margin-right:10px;color:#666">popcorn-101-with-instapoppin.html</a>
<a href="https://gist.github.com/1290242">This Gist</a> brought to you by <a href="http://github.com">GitHub</a>.
</div>
</div>
</div>