kfitz/presentations.kfitz.info
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major, non backwards compatible, restructuring of DOM tree

Browse Source
This commit is contained in:
Hakim El Hattab committed 2011-12-26 21:29:00 -08:00
1 parent 5b2b3fa3df
commit daecc258d7
4 files changed
+320 -323
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+7
View File
@@ -14,6 +14,13 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak
# History
### 1.2
- Big changes to DOM structure:
- Previous #main wrapper is now called #reveal
- Slides were moved one level deeper, into #reveal .slides
- Controls and progress bar were moved into #reveal
- CSS is now much more explicit, rooted at #reveal, to prevent conflicts
### 1.1
- Added an optional presentation progress bar
css/main.css
+124 -105
View File
@@ -53,7 +53,10 @@ html {
/*********************************************
* HEADERS
*********************************************/
h1, h2, h3, h4 {
#reveal h1,
#reveal h2,
#reveal h3,
#reveal h4 {
margin: 0 0 20px 0;
color: #eee;
@@ -66,31 +69,31 @@ h1, h2, h3, h4 {
text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
}
h1 { font-size: 136px; }
h2 { font-size: 76px; }
h3 { font-size: 56px; }
h4 { font-size: 36px; }
#reveal h1 { font-size: 136px; }
#reveal h2 { font-size: 76px; }
#reveal h3 { font-size: 56px; }
#reveal h4 { font-size: 36px; }
h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
#reveal h1.inverted,
#reveal h2.inverted,
#reveal h3.inverted,
#reveal h4.inverted {
color: #fff;
text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
h1 {
#reveal h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 20px 20px rgba(0,0,0,.15);
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 20px 20px rgba(0,0,0,.15);
}
@@ -98,7 +101,7 @@ h1 {
* VIEW FRAGMENTS
*********************************************/
#reveal section .fragment {
#reveal .slides section .fragment {
opacity: 0;
-webkit-transition: all .2s ease;
@@ -107,7 +110,7 @@ h1 {
-o-transition: all .2s ease;
transition: all .2s ease;
}
#reveal section .fragment.visible {
#reveal .slides section .fragment.visible {
opacity: 1;
}
@@ -116,40 +119,43 @@ h1 {
* DEFAULT ELEMENT STYLES
*********************************************/
#reveal>section {
#reveal .slides section {
line-height: 1.2em;
font-weight: normal;
}
strong, b {
#reveal strong,
#reveal b {
font-weight: bold;
}
em, i {
#reveal em,
#reveal i {
font-style: italic;
}
ol, ul {
#reveal ol,
#reveal ul {
display: inline-block;
text-align: left;
margin: 0 auto;
}
ol {
#reveal ol {
list-style: decimal;
list-style-position: inside;
}
ul {
#reveal ul {
list-style: disc;
}
p {
#reveal p {
margin-bottom: 10px;
}
blockquote {
#reveal blockquote {
display: block;
position: relative;
width: 70%;
@@ -160,14 +166,14 @@ blockquote {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
blockquote:before {
#reveal blockquote:before {
content: '“';
}
blockquote:after {
#reveal blockquote:after {
content: '”';
}
pre {
#reveal pre {
display: block;
position: relative;
width: 90%;
@@ -183,27 +189,27 @@ pre {
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
}
code {
#reveal code {
font-family: monospace;
}
small {
#reveal small {
font-size: 60%;
line-height: 1em;
vertical-align: top;
}
q {
#reveal q {
font-style: italic;
}
q:before {
#reveal q:before {
content: '“';
}
q:after {
#reveal q:after {
content: '”';
}
a:not(.image) {
#reveal a:not(.image) {
color: hsl(185, 85%, 50%);
text-decoration: none;
@@ -214,7 +220,7 @@ a:not(.image) {
transition: all .2s ease;
}
a:not(.image):hover {
#reveal a:not(.image):hover {
color: hsl(185, 85%, 70%);
background: hsla(185, 25%, 20%, 0.4);
text-shadow: none;
@@ -222,7 +228,7 @@ a:not(.image) {
border-radius: 2px;
}
section img {
#reveal section img {
margin: 30px 0 0 0;
background: rgba(255,255,255,0.12);
border: 4px solid #eee;
@@ -239,7 +245,7 @@ section img {
transition: all .2s linear;
}
a.image:hover img {
#reveal a.image:hover img {
background: rgba(255,255,255,0.2);
border-color: #13DAEC;
@@ -254,7 +260,7 @@ section img {
* CONTROLS
*********************************************/
.controls {
#reveal .controls {
display: none;
position: fixed;
width: 100px;
@@ -264,36 +270,36 @@ section img {
bottom: 0;
}
.controls a {
#reveal .controls a {
font-size: 30px;
position: absolute;
opacity: 0.1;
color: #fff;
}
.controls a.enabled {
#reveal .controls a.enabled {
opacity: 0.6;
color: hsl(185, 85%, 70%);
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
}
.controls a.enabled:active {
#reveal .controls a.enabled:active {
margin-top: 1px;
}
.controls .left {
#reveal .controls .left {
top: 30px;
}
.controls .right {
#reveal .controls .right {
left: 60px;
top: 30px;
}
.controls .up {
#reveal .controls .up {
left: 30px;
}
.controls .down {
#reveal .controls .down {
left: 30px;
top: 60px;
@@ -304,7 +310,7 @@ section img {
* PROGRESS BAR
*********************************************/
.progress {
#reveal .progress {
position: fixed;
display: none;
height: 4px;
@@ -315,7 +321,7 @@ section img {
background: rgba(0,0,0,0.2);
}
.progress span {
#reveal .progress span {
display: block;
background: hsl(185, 85%, 50%);
height: 100%;
@@ -332,7 +338,7 @@ section img {
* ROLLING LINKS
*********************************************/
.roll {
#reveal .roll {
display: inline-block;
overflow: hidden;
@@ -348,11 +354,11 @@ section img {
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.roll:hover {
#reveal .roll:hover {
background: none;
text-shadow: none;
}
.roll span {
#reveal .roll span {
display: block;
position: relative;
padding: 0 2px;
@@ -374,7 +380,7 @@ section img {
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.roll:hover span {
#reveal .roll:hover span {
background: rgba(0,0,0,0.5);
-webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
@@ -382,7 +388,7 @@ section img {
-ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.roll span:after {
#reveal .roll span:after {
content: attr(data-title);
display: block;
@@ -410,7 +416,7 @@ section img {
* SLIDES
*********************************************/
#reveal {
#reveal .slides {
position: absolute;
width: 900px;
height: 600px;
@@ -423,6 +429,12 @@ section img {
text-align: center;
-webkit-transition: -webkit-perspective .4s ease;
-moz-transition: -moz-perspective .4s ease;
-ms-transition: -ms-perspective .4s ease;
-o-transition: -o-perspective .4s ease;
transition: perspective .4s ease;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
@@ -434,8 +446,8 @@ section img {
perspective-origin: 50% 25%;
}
#reveal>section,
#reveal>section>section {
#reveal .slides>section,
#reveal .slides>section>section {
display: none;
position: absolute;
width: 100%;
@@ -455,7 +467,7 @@ section img {
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
#reveal section.present {
#reveal .slides>section.present {
display: block;
z-index: 11;
opacity: 1;
@@ -466,7 +478,7 @@ section img {
* DEFAULT TRANSITION
*********************************************/
#reveal section.past {
#reveal .slides>section.past {
display: block;
opacity: 0;
@@ -475,7 +487,7 @@ section img {
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
#reveal section.future {
#reveal .slides>section.future {
display: block;
opacity: 0;
@@ -485,7 +497,7 @@ section img {
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
#reveal section>section.past {
#reveal .slides>section>section.past {
display: block;
opacity: 0;
@@ -494,7 +506,7 @@ section img {
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
}
#reveal section>section.future {
#reveal .slides>section>section.future {
display: block;
opacity: 0;
@@ -509,26 +521,26 @@ section img {
* CONCAVE TRANSITION
*********************************************/
.concave #reveal>section.past {
#reveal.concave .slides>section.past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.concave #reveal>section.future {
#reveal.concave .slides>section.future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.concave #reveal section>section.past {
#reveal.concave .slides>section>section.past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
.concave #reveal section>section.future {
#reveal.concave .slides>section>section.future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
@@ -540,14 +552,14 @@ section img {
* LINEAR TRANSITION
*********************************************/
.linear #reveal>section.past {
#reveal.linear .slides>section.past {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.linear #reveal>section.future {
#reveal.linear .slides>section.future {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
@@ -555,14 +567,14 @@ section img {
transform: translate(150%, 0);
}
.linear #reveal section>section.past {
#reveal.linear .slides>section>section.past {
-webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
-o-transform: translate(0, -150%);
transform: translate(0, -150%);
}
.linear #reveal section>section.future {
#reveal.linear .slides>section>section.future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
@@ -574,7 +586,7 @@ section img {
* BOX TRANSITION
*********************************************/
.box #reveal {
#reveal.box .slides {
margin-top: -350px;
-webkit-perspective-origin: 50% 25%;
@@ -588,14 +600,14 @@ section img {
perspective: 1300px;
}
.box #reveal section {
#reveal.box .slides section {
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box #reveal section:not(.stack):before {
#reveal.box .slides section:not(.stack):before {
content: '';
position: absolute;
display: block;
@@ -612,7 +624,7 @@ section img {
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
.box #reveal section:not(.stack):after {
#reveal.box .slides section:not(.stack):after {
content: '';
position: absolute;
display: block;
@@ -633,12 +645,12 @@ section img {
transform: translateZ(-90px) rotateX( 65deg );
}
.box #reveal section.stack {
#reveal.box .slides>section.stack {
padding: 0;
background: none;
}
.box #reveal>section.past {
#reveal.box .slides>section.past {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
@@ -650,7 +662,7 @@ section img {
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
}
.box #reveal>section.future {
#reveal.box .slides>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
@@ -662,7 +674,7 @@ section img {
transform: translate3d(100%, 0, 0) rotateY(90deg);
}
.box #reveal section>section.past {
#reveal.box .slides>section>section.past {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
@@ -674,7 +686,7 @@ section img {
transform: translate3d(0, -100%, 0) rotateX(90deg);
}
.box #reveal section>section.future {
#reveal.box .slides>section>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
@@ -691,7 +703,7 @@ section img {
* PAGE TRANSITION
*********************************************/
.page #reveal {
#reveal.page .slides {
margin-top: -350px;
-webkit-perspective-origin: 50% 50%;
@@ -705,17 +717,17 @@ section img {
perspective: 3000px;
}
.page #reveal section {
#reveal.page .slides section {
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page #reveal section.past {
#reveal.page .slides section.past {
z-index: 12;
}
.page #reveal section:not(.stack):before {
#reveal.page .slides section:not(.stack):before {
content: '';
position: absolute;
display: block;
@@ -731,7 +743,7 @@ section img {
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
.page #reveal section:not(.stack):after {
#reveal.page .slides section:not(.stack):after {
content: '';
position: absolute;
display: block;
@@ -748,12 +760,12 @@ section img {
-webkit-transform: translateZ(-90px) rotateX( 65deg );
}
.page #reveal section.stack {
#reveal.page .slides>section.stack {
padding: 0;
background: none;
}
.page #reveal>section.past {
#reveal.page .slides>section.past {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
@@ -765,7 +777,7 @@ section img {
transform: translate3d(-40%, 0, 0) rotateY(-80deg);
}
.page #reveal>section.future {
#reveal.page .slides>section.future {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
@@ -777,7 +789,7 @@ section img {
transform: translate3d(0, 0, 0);
}
.page #reveal section>section.past {
#reveal.page .slides>section>section.past {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
@@ -789,7 +801,7 @@ section img {
transform: translate3d(0, -40%, 0) rotateX(80deg);
}
.page #reveal section>section.future {
#reveal.page .slides>section>section.future {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
@@ -806,18 +818,18 @@ section img {
* NEON THEME
*********************************************/
.neon a,
.neon a:hover,
.neon .controls a.enabled {
#reveal.neon a,
#reveal.neon a:hover,
#reveal.neon .controls a.enabled {
color: #5de048;
}
.neon .progress span,
.neon .roll span:after {
#reveal.neon .progress span,
#reveal.neon .roll span:after {
background: #5de048;
}
a.image:hover img {
#reveal.neon a.image:hover img {
border-color: #5de048;
}
@@ -826,28 +838,35 @@ a.image:hover img {
* OVERVIEW
*********************************************/
.overview #reveal section {
#reveal.overview .slides {
-webkit-perspective: 700px;
-moz-perspective: 700px;
-ms-perspective: 700px;
perspective: 700px;
}
#reveal.overview .slides section {
padding: 20px 0;
opacity: 1;
cursor: pointer;
background: rgba(0,0,0,0.1);
}
.overview #reveal section:after,
.overview #reveal section:before {
#reveal.overview .slides section:after,
#reveal.overview .slides section:before {
display: none !important;
}
.overview #reveal section>section {
#reveal.overview .slides section>section {
opacity: 1;
cursor: pointer;
}
.overview #reveal section:hover {
#reveal.overview .slides section:hover {
background: rgba(0,0,0,0.3);
}
.overview #reveal section.present {
#reveal.overview .slides section.present {
background: rgba(0,0,0,0.3);
}
.overview #reveal section.stack {
#reveal.overview .slides>section.stack {
background: none;
padding: 0;
}
index.html
+163 -199
View File
@@ -16,182 +16,185 @@
<body>
<!-- Any section element inside of this container is displayed as a slide -->
<div id="reveal">
<section>
<h1>Reveal.js</h1>
<h3 class="inverted">A CSS 3D Slideshow</h3>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<section>
<h2>Heads Up</h2>
<p>
reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with
support for CSS 3D transforms to see it in its full glory.
</p>
<p>
<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h2>Vertical Slides</h2>
<h1>Reveal.js</h1>
<h3 class="inverted">A CSS 3D Slideshow</h3>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<section>
<h2>Heads Up</h2>
<p>
Slides can be nested inside of other slides,<br/>
try pressing <a href="#/2/1">down</a>.
reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with
support for CSS 3D transforms to see it in its full glory.
</p>
<a href="#/2/1" class="image">
<img src="data:image/png;base64,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">
<p>
<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>
Slides can be nested inside of other slides,<br/>
try pressing <a href="#/2/1">down</a>.
</p>
<a href="#/2/1" class="image">
<img src="data:image/png;base64,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">
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Press down or up to navigate.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>Cornify</p>
<a class="test" href="http://cornify.com"><img src="data:image/gif;base64,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 truncated
</section>
<section>
<h2>Basement Level 3</h2>
<p>That's it, time to go back up.</p>
<a href="#/2" class="image">
<img style="-webkit-transform: rotate(180deg);" src="data:image/png;base64,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">
</a>
</section>
</section>
<section>
<h2>Holistic Overview</h2>
<p>
Press <em>SPACE</em> to enter the slide overview. This allows you to navigate faster
in larger decks using the keyboard.
</p>
<p>
This feature is highly experimental and will be updated to boost performance.
</p>
</section>
<section>
<h2>Marvelous Unordered List</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
<section>
<h2>Fantastic Ordered List</h2>
<ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>
</section>
<section>
<h2>Clever Quotes</h2>
<p>
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
The nice thing about standards is that there are so many to choose from</q> and block:
</p>
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
</blockquote>
</section>
<section>
<h2>Pretty Code</h2>
<pre><code contenteditable>
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
document.body.style['MozPerspective'] !== undefined ||
document.body.style['perspective'] !== undefined;
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className || !node.className.match( /roll/g ) ) {
node.className += ' roll';
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
}
};
}
}
linkify( 'a' );
</code></pre>
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
<section>
<h2>Intergalactic Interconnections</h2>
<p>
You can link between slides internally,<br/>
<a href="#/2/3">like this</a>.
</p>
</section>
<section>
<h2>Fragmented Views</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<ol>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
</section>
<section>
<h2>Spectacular image!</h2>
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
<img src="data:image/png;base64,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 truncated
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Press down or up to navigate.</p>
<h2>Stellar Links</h2>
<ul>
<li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li>
<li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li>
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
</ul>
</section>
<section>
<h2>Basement Level 2</h2>
<p>Cornify</p>
<a class="test" href="http://cornify.com"><img src="data:image/gif;base64,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 truncated
<h1>THE END</h1>
<h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
</section>
<section>
<h2>Basement Level 3</h2>
<p>That's it, time to go back up.</p>
<a href="#/2" class="image">
<img style="-webkit-transform: rotate(180deg);" src="data:image/png;base64,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">
</a>
</section>
</section>
</div>
<section>
<h2>Holistic Overview</h2>
<p>
Press <em>SPACE</em> to enter the slide overview. This allows you to navigate faster
in larger decks using the keyboard.
</p>
<p>
This feature is highly experimental and will be updated to boost performance.
</p>
</section>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<section>
<h2>Marvelous Unordered List</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
<section>
<h2>Fantastic Ordered List</h2>
<ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>
</section>
<section>
<h2>Clever Quotes</h2>
<p>
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
The nice thing about standards is that there are so many to choose from</q> and block:
</p>
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
</blockquote>
</section>
<section>
<h2>Pretty Code</h2>
<pre><code contenteditable>
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
document.body.style['MozPerspective'] !== undefined ||
document.body.style['perspective'] !== undefined;
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className || !node.className.match( /roll/g ) ) {
node.className += ' roll';
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
}
};
}
}
linkify( 'a' );
</code></pre>
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
<section>
<h2>Intergalactic Interconnections</h2>
<p>
You can link between slides internally,<br/>
<a href="#/2/3">like this</a>.
</p>
</section>
<section>
<h2>Fragmented Views</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<ol>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
</section>
<section>
<h2>Spectacular image!</h2>
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
<img src="data:image/png;base64,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 truncated
</a>
</section>
<section>
<h2>Stellar Links</h2>
<ul>
<li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li>
<li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li>
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
</ul>
</section>
<section>
<h1>THE END</h1>
<h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
</section>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
<script src="js/reveal.js"></script>
<script src="lib/highlight.js"></script>
<script>
@@ -221,44 +224,5 @@ linkify( 'a' );
hljs.initHighlightingOnLoad();
</script>
<!-- Everything below this point is unrelated to the slideshow -->
<div style="position: absolute; bottom: 10px; left: 50%; margin-left: -160px">
<a href="http://twitter.com/share" class="twitter-share-button" data-text="reveal.js - a 3D slideshow tool from @hakimel." data-url="http://lab.hakim.se/reveal-js" data-count="small" data-related="hakimel"></a>
<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fapp.hakim.se%2Freveal-js%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script>
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://lab.hakim.se/reveal-js"></a>
<noscript><a href="http://flattr.com/thing/447435/Reveal-js" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
</div>
<a href="https://github.com/hakimel/reveal.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
<script>
var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
js/reveal.js
+26 -19
View File
@@ -67,7 +67,11 @@
* - Slides that contain nested-slides are given the 'stack' class
*
* version 1.2:
* - Main container was renamed from #main to #reveal
* - Big changes to DOM structure:
* - Previous #main wrapper is now called #reveal
* - Slides were moved one level deeper, into #reveal .slides
* - Controls and progress bar were moved into #reveal
* - All CSS is now much more explicit, rooted at #reveal, to prevent conflicts
*
*
* @author Hakim El Hattab | http://hakim.se
@@ -75,8 +79,8 @@
*/
var Reveal = (function(){
var HORIZONTAL_SLIDES_SELECTOR = '#reveal>section',
VERTICAL_SLIDES_SELECTOR = 'section.present>section',
var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
// The horizontal and verical index of the currently active slide
indexh = 0,
@@ -105,13 +109,14 @@ var Reveal = (function(){
*/
function initialize( options ) {
// Cache references to DOM elements
dom.progress = document.querySelector( 'body>.progress' );
dom.progressbar = document.querySelector( 'body>.progress span' );
dom.controls = document.querySelector( '.controls' );
dom.controlsLeft = document.querySelector( '.controls .left' );
dom.controlsRight = document.querySelector( '.controls .right' );
dom.controlsUp = document.querySelector( '.controls .up' );
dom.controlsDown = document.querySelector( '.controls .down' );
dom.wrapper = document.querySelector( '#reveal' );
dom.progress = document.querySelector( '#reveal .progress' );
dom.progressbar = document.querySelector( '#reveal .progress span' );
dom.controls = document.querySelector( '#reveal .controls' );
dom.controlsLeft = document.querySelector( '#reveal .controls .left' );
dom.controlsRight = document.querySelector( '#reveal .controls .right' );
dom.controlsUp = document.querySelector( '#reveal .controls .up' );
dom.controlsDown = document.querySelector( '#reveal .controls .down' );
// Bind all view events
document.addEventListener('keydown', onDocumentKeyDown, false);
@@ -143,11 +148,11 @@ var Reveal = (function(){
}
if( config.transition !== 'default' ) {
document.body.classList.add( config.transition );
dom.wrapper.classList.add( config.transition );
}
if( config.theme !== 'default' ) {
document.body.classList.add( config.theme );
dom.wrapper.classList.add( config.theme );
}
if( config.rollingLinks ) {
@@ -270,7 +275,7 @@ var Reveal = (function(){
*/
function linkify() {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( 'section a:not(.image)' );
var nodes = document.querySelectorAll( '#reveal .slides section a:not(.image)' );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
@@ -291,7 +296,7 @@ var Reveal = (function(){
* can't be improved.
*/
function activateOverview() {
document.body.classList.add( 'overview' );
dom.wrapper.classList.add( 'overview' );
var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
@@ -307,8 +312,10 @@ var Reveal = (function(){
hslide.style.OTransform = htransform;
hslide.style.transform = htransform;
// Navigate to this slide on click
hslide.addEventListener( 'click', onOverviewSlideClicked, true );
if( !hslide.classList.contains( 'stack' ) ) {
// Navigate to this slide on click
hslide.addEventListener( 'click', onOverviewSlideClicked, true );
}
var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) );
@@ -336,9 +343,9 @@ var Reveal = (function(){
* active slide.
*/
function deactivateOverview() {
document.body.classList.remove( 'overview' );
dom.wrapper.classList.remove( 'overview' );
var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal section' ) );
var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) );
for( var i = 0, len = slides.length; i < len; i++ ) {
var element = slides[i];
@@ -363,7 +370,7 @@ var Reveal = (function(){
* false otherwise
*/
function overviewIsActive() {
return document.body.classList.contains( 'overview' );
return dom.wrapper.classList.contains( 'overview' );
}
/**