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
+322 -325
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 # 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 ### 1.1
- Added an optional presentation progress bar - Added an optional presentation progress bar
css/main.css
+124 -105
View File
@@ -53,7 +53,10 @@ html {
/********************************************* /*********************************************
* HEADERS * HEADERS
*********************************************/ *********************************************/
h1, h2, h3, h4 { #reveal h1,
#reveal h2,
#reveal h3,
#reveal h4 {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #eee; color: #eee;
@@ -66,31 +69,31 @@ h1, h2, h3, h4 {
text-shadow: 0px 0px 6px rgba(0,0,0,0.2); text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
} }
h1 { font-size: 136px; } #reveal h1 { font-size: 136px; }
h2 { font-size: 76px; } #reveal h2 { font-size: 76px; }
h3 { font-size: 56px; } #reveal h3 { font-size: 56px; }
h4 { font-size: 36px; } #reveal h4 { font-size: 36px; }
h1.inverted, #reveal h1.inverted,
h2.inverted, #reveal h2.inverted,
h3.inverted, #reveal h3.inverted,
h4.inverted { #reveal h4.inverted {
color: #fff; color: #fff;
text-shadow: 0px 0px 2px rgba(0,0,0,0.2); text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
} }
h1 { #reveal h1 {
text-shadow: 0 1px 0 #ccc, text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9, 0 2px 0 #c9c9c9,
0 3px 0 #bbb, 0 3px 0 #bbb,
0 4px 0 #b9b9b9, 0 4px 0 #b9b9b9,
0 5px 0 #aaa, 0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1), 0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25), 0 5px 10px rgba(0,0,0,.25),
0 20px 20px rgba(0,0,0,.15); 0 20px 20px rgba(0,0,0,.15);
} }
@@ -98,7 +101,7 @@ h1 {
* VIEW FRAGMENTS * VIEW FRAGMENTS
*********************************************/ *********************************************/
#reveal section .fragment { #reveal .slides section .fragment {
opacity: 0; opacity: 0;
-webkit-transition: all .2s ease; -webkit-transition: all .2s ease;
@@ -107,7 +110,7 @@ h1 {
-o-transition: all .2s ease; -o-transition: all .2s ease;
transition: all .2s ease; transition: all .2s ease;
} }
#reveal section .fragment.visible { #reveal .slides section .fragment.visible {
opacity: 1; opacity: 1;
} }
@@ -116,40 +119,43 @@ h1 {
* DEFAULT ELEMENT STYLES * DEFAULT ELEMENT STYLES
*********************************************/ *********************************************/
#reveal>section { #reveal .slides section {
line-height: 1.2em; line-height: 1.2em;
font-weight: normal; font-weight: normal;
} }
strong, b { #reveal strong,
#reveal b {
font-weight: bold; font-weight: bold;
} }
em, i { #reveal em,
#reveal i {
font-style: italic; font-style: italic;
} }
ol, ul { #reveal ol,
#reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 auto; margin: 0 auto;
} }
ol { #reveal ol {
list-style: decimal; list-style: decimal;
list-style-position: inside; list-style-position: inside;
} }
ul { #reveal ul {
list-style: disc; list-style: disc;
} }
p { #reveal p {
margin-bottom: 10px; margin-bottom: 10px;
} }
blockquote { #reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
@@ -160,14 +166,14 @@ blockquote {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
} }
blockquote:before { #reveal blockquote:before {
content: '“'; content: '“';
} }
blockquote:after { #reveal blockquote:after {
content: '”'; content: '”';
} }
pre { #reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
@@ -183,27 +189,27 @@ pre {
box-shadow: 0px 0px 6px rgba(0,0,0,0.3); box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
} }
code { #reveal code {
font-family: monospace; font-family: monospace;
} }
small { #reveal small {
font-size: 60%; font-size: 60%;
line-height: 1em; line-height: 1em;
vertical-align: top; vertical-align: top;
} }
q { #reveal q {
font-style: italic; font-style: italic;
} }
q:before { #reveal q:before {
content: '“'; content: '“';
} }
q:after { #reveal q:after {
content: '”'; content: '”';
} }
a:not(.image) { #reveal a:not(.image) {
color: hsl(185, 85%, 50%); color: hsl(185, 85%, 50%);
text-decoration: none; text-decoration: none;
@@ -214,7 +220,7 @@ a:not(.image) {
transition: all .2s ease; transition: all .2s ease;
} }
a:not(.image):hover { #reveal a:not(.image):hover {
color: hsl(185, 85%, 70%); color: hsl(185, 85%, 70%);
background: hsla(185, 25%, 20%, 0.4); background: hsla(185, 25%, 20%, 0.4);
text-shadow: none; text-shadow: none;
@@ -222,7 +228,7 @@ a:not(.image) {
border-radius: 2px; border-radius: 2px;
} }
section img { #reveal section img {
margin: 30px 0 0 0; margin: 30px 0 0 0;
background: rgba(255,255,255,0.12); background: rgba(255,255,255,0.12);
border: 4px solid #eee; border: 4px solid #eee;
@@ -239,7 +245,7 @@ section img {
transition: all .2s linear; transition: all .2s linear;
} }
a.image:hover img { #reveal a.image:hover img {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
border-color: #13DAEC; border-color: #13DAEC;
@@ -254,7 +260,7 @@ section img {
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
.controls { #reveal .controls {
display: none; display: none;
position: fixed; position: fixed;
width: 100px; width: 100px;
@@ -264,36 +270,36 @@ section img {
bottom: 0; bottom: 0;
} }
.controls a { #reveal .controls a {
font-size: 30px; font-size: 30px;
position: absolute; position: absolute;
opacity: 0.1; opacity: 0.1;
color: #fff; color: #fff;
} }
.controls a.enabled { #reveal .controls a.enabled {
opacity: 0.6; opacity: 0.6;
color: hsl(185, 85%, 70%); color: hsl(185, 85%, 70%);
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
} }
.controls a.enabled:active { #reveal .controls a.enabled:active {
margin-top: 1px; margin-top: 1px;
} }
.controls .left { #reveal .controls .left {
top: 30px; top: 30px;
} }
.controls .right { #reveal .controls .right {
left: 60px; left: 60px;
top: 30px; top: 30px;
} }
.controls .up { #reveal .controls .up {
left: 30px; left: 30px;
} }
.controls .down { #reveal .controls .down {
left: 30px; left: 30px;
top: 60px; top: 60px;
@@ -304,7 +310,7 @@ section img {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.progress { #reveal .progress {
position: fixed; position: fixed;
display: none; display: none;
height: 4px; height: 4px;
@@ -315,7 +321,7 @@ section img {
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
} }
.progress span { #reveal .progress span {
display: block; display: block;
background: hsl(185, 85%, 50%); background: hsl(185, 85%, 50%);
height: 100%; height: 100%;
@@ -332,7 +338,7 @@ section img {
* ROLLING LINKS * ROLLING LINKS
*********************************************/ *********************************************/
.roll { #reveal .roll {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
@@ -348,11 +354,11 @@ section img {
-ms-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%; perspective-origin: 50% 50%;
} }
.roll:hover { #reveal .roll:hover {
background: none; background: none;
text-shadow: none; text-shadow: none;
} }
.roll span { #reveal .roll span {
display: block; display: block;
position: relative; position: relative;
padding: 0 2px; padding: 0 2px;
@@ -374,7 +380,7 @@ section img {
-ms-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.roll:hover span { #reveal .roll:hover span {
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
-webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
@@ -382,7 +388,7 @@ section img {
-ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
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); content: attr(data-title);
display: block; display: block;
@@ -410,7 +416,7 @@ section img {
* SLIDES * SLIDES
*********************************************/ *********************************************/
#reveal { #reveal .slides {
position: absolute; position: absolute;
width: 900px; width: 900px;
height: 600px; height: 600px;
@@ -422,6 +428,12 @@ section img {
padding: 20px 0px; padding: 20px 0px;
text-align: center; 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; -webkit-perspective: 600px;
-moz-perspective: 600px; -moz-perspective: 600px;
@@ -434,8 +446,8 @@ section img {
perspective-origin: 50% 25%; perspective-origin: 50% 25%;
} }
#reveal>section, #reveal .slides>section,
#reveal>section>section { #reveal .slides>section>section {
display: none; display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -455,7 +467,7 @@ section img {
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
#reveal section.present { #reveal .slides>section.present {
display: block; display: block;
z-index: 11; z-index: 11;
opacity: 1; opacity: 1;
@@ -466,7 +478,7 @@ section img {
* DEFAULT TRANSITION * DEFAULT TRANSITION
*********************************************/ *********************************************/
#reveal section.past { #reveal .slides>section.past {
display: block; display: block;
opacity: 0; opacity: 0;
@@ -475,7 +487,7 @@ section img {
-ms-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); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
} }
#reveal section.future { #reveal .slides>section.future {
display: block; display: block;
opacity: 0; opacity: 0;
@@ -485,7 +497,7 @@ section img {
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
} }
#reveal section>section.past { #reveal .slides>section>section.past {
display: block; display: block;
opacity: 0; opacity: 0;
@@ -494,7 +506,7 @@ section img {
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
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; display: block;
opacity: 0; opacity: 0;
@@ -509,26 +521,26 @@ section img {
* CONCAVE TRANSITION * CONCAVE TRANSITION
*********************************************/ *********************************************/
.concave #reveal>section.past { #reveal.concave .slides>section.past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-moz-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); -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
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); -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-moz-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); -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
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); -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-moz-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); -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
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); -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-moz-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); -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
@@ -540,14 +552,14 @@ section img {
* LINEAR TRANSITION * LINEAR TRANSITION
*********************************************/ *********************************************/
.linear #reveal>section.past { #reveal.linear .slides>section.past {
-webkit-transform: translate(-150%, 0); -webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0); -moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0); -ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0); -o-transform: translate(-150%, 0);
transform: translate(-150%, 0); transform: translate(-150%, 0);
} }
.linear #reveal>section.future { #reveal.linear .slides>section.future {
-webkit-transform: translate(150%, 0); -webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0); -moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0); -ms-transform: translate(150%, 0);
@@ -555,14 +567,14 @@ section img {
transform: translate(150%, 0); transform: translate(150%, 0);
} }
.linear #reveal section>section.past { #reveal.linear .slides>section>section.past {
-webkit-transform: translate(0, -150%); -webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%); -moz-transform: translate(0, -150%);
-ms-transform: translate(0, -150%); -ms-transform: translate(0, -150%);
-o-transform: translate(0, -150%); -o-transform: translate(0, -150%);
transform: translate(0, -150%); transform: translate(0, -150%);
} }
.linear #reveal section>section.future { #reveal.linear .slides>section>section.future {
-webkit-transform: translate(0, 150%); -webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%); -moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%); -ms-transform: translate(0, 150%);
@@ -574,7 +586,7 @@ section img {
* BOX TRANSITION * BOX TRANSITION
*********************************************/ *********************************************/
.box #reveal { #reveal.box .slides {
margin-top: -350px; margin-top: -350px;
-webkit-perspective-origin: 50% 25%; -webkit-perspective-origin: 50% 25%;
@@ -588,14 +600,14 @@ section img {
perspective: 1300px; perspective: 1300px;
} }
.box #reveal section { #reveal.box .slides section {
padding: 30px; padding: 30px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.box #reveal section:not(.stack):before { #reveal.box .slides section:not(.stack):before {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
@@ -612,7 +624,7 @@ section img {
-o-transform: translateZ( -20px ); -o-transform: translateZ( -20px );
transform: translateZ( -20px ); transform: translateZ( -20px );
} }
.box #reveal section:not(.stack):after { #reveal.box .slides section:not(.stack):after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
@@ -633,12 +645,12 @@ section img {
transform: translateZ(-90px) rotateX( 65deg ); transform: translateZ(-90px) rotateX( 65deg );
} }
.box #reveal section.stack { #reveal.box .slides>section.stack {
padding: 0; padding: 0;
background: none; background: none;
} }
.box #reveal>section.past { #reveal.box .slides>section.past {
-webkit-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%;
@@ -650,7 +662,7 @@ section img {
transform: translate3d(-100%, 0, 0) rotateY(-90deg); transform: translate3d(-100%, 0, 0) rotateY(-90deg);
} }
.box #reveal>section.future { #reveal.box .slides>section.future {
-webkit-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%;
@@ -662,7 +674,7 @@ section img {
transform: translate3d(100%, 0, 0) rotateY(90deg); transform: translate3d(100%, 0, 0) rotateY(90deg);
} }
.box #reveal section>section.past { #reveal.box .slides>section>section.past {
-webkit-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%;
@@ -674,7 +686,7 @@ section img {
transform: translate3d(0, -100%, 0) rotateX(90deg); transform: translate3d(0, -100%, 0) rotateX(90deg);
} }
.box #reveal section>section.future { #reveal.box .slides>section>section.future {
-webkit-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%;
@@ -691,7 +703,7 @@ section img {
* PAGE TRANSITION * PAGE TRANSITION
*********************************************/ *********************************************/
.page #reveal { #reveal.page .slides {
margin-top: -350px; margin-top: -350px;
-webkit-perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%;
@@ -705,17 +717,17 @@ section img {
perspective: 3000px; perspective: 3000px;
} }
.page #reveal section { #reveal.page .slides section {
padding: 30px; padding: 30px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.page #reveal section.past { #reveal.page .slides section.past {
z-index: 12; z-index: 12;
} }
.page #reveal section:not(.stack):before { #reveal.page .slides section:not(.stack):before {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
@@ -731,7 +743,7 @@ section img {
-o-transform: translateZ( -20px ); -o-transform: translateZ( -20px );
transform: translateZ( -20px ); transform: translateZ( -20px );
} }
.page #reveal section:not(.stack):after { #reveal.page .slides section:not(.stack):after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
@@ -748,12 +760,12 @@ section img {
-webkit-transform: translateZ(-90px) rotateX( 65deg ); -webkit-transform: translateZ(-90px) rotateX( 65deg );
} }
.page #reveal section.stack { #reveal.page .slides>section.stack {
padding: 0; padding: 0;
background: none; background: none;
} }
.page #reveal>section.past { #reveal.page .slides>section.past {
-webkit-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%;
@@ -765,7 +777,7 @@ section img {
transform: translate3d(-40%, 0, 0) rotateY(-80deg); transform: translate3d(-40%, 0, 0) rotateY(-80deg);
} }
.page #reveal>section.future { #reveal.page .slides>section.future {
-webkit-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%;
@@ -777,7 +789,7 @@ section img {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.page #reveal section>section.past { #reveal.page .slides>section>section.past {
-webkit-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%;
@@ -789,7 +801,7 @@ section img {
transform: translate3d(0, -40%, 0) rotateX(80deg); transform: translate3d(0, -40%, 0) rotateX(80deg);
} }
.page #reveal section>section.future { #reveal.page .slides>section>section.future {
-webkit-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%;
@@ -806,18 +818,18 @@ section img {
* NEON THEME * NEON THEME
*********************************************/ *********************************************/
.neon a, #reveal.neon a,
.neon a:hover, #reveal.neon a:hover,
.neon .controls a.enabled { #reveal.neon .controls a.enabled {
color: #5de048; color: #5de048;
} }
.neon .progress span, #reveal.neon .progress span,
.neon .roll span:after { #reveal.neon .roll span:after {
background: #5de048; background: #5de048;
} }
a.image:hover img { #reveal.neon a.image:hover img {
border-color: #5de048; border-color: #5de048;
} }
@@ -826,28 +838,35 @@ a.image:hover img {
* OVERVIEW * 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; padding: 20px 0;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }
.overview #reveal section:after, #reveal.overview .slides section:after,
.overview #reveal section:before { #reveal.overview .slides section:before {
display: none !important; display: none !important;
} }
.overview #reveal section>section { #reveal.overview .slides section>section {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
.overview #reveal section:hover { #reveal.overview .slides section:hover {
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
} }
.overview #reveal section.present { #reveal.overview .slides section.present {
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
} }
.overview #reveal section.stack { #reveal.overview .slides>section.stack {
background: none; background: none;
padding: 0; padding: 0;
} }
index.html
+165 -201
View File
@@ -16,182 +16,185 @@
<body> <body>
<!-- Any section element inside of this container is displayed as a slide -->
<div id="reveal"> <div id="reveal">
<section> <!-- Any section element inside of this container is displayed as a slide -->
<h1>Reveal.js</h1> <div class="slides">
<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>
<section> <section>
<h2>Vertical Slides</h2> <h1>Reveal.js</h1>
<p> <h3 class="inverted">A CSS 3D Slideshow</h3>
Slides can be nested inside of other slides,<br/> <script>
try pressing <a href="#/2/1">down</a>. // Delicously hacky. Look away.
</p> if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
<a href="#/2/1" class="image"> document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
<img src="data:image/png;base64,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"> </script>
</a>
</section> </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,R0lGODlhGAFGAfcAAAAAAP///ykQIb0AvbUAtaUApWsAa0IYQhAIEHNrc4yEjCEQORAIKQAAEAAACBAQYzEx5ykpvTk5/yEhlDk590JC/0JCUhAYMQAIEAD/AADnAAAxAAAQAAAIAAitCAhjCAhKCBCEECGtISnOKTHnMTn/OUL/QgcKBxghGB8oHyszKyw0LFBXUGdtZ5KXkq6yrsvNyxhSEBAYABghAC41EzY+FTM3EVJZEnV7DmZsENLUA8fJBqSoCZ2hCo+TDP//AP7+APv7APr6APn5APf3APHxAO/vAO7uAOjoAOfnAN7eANbWANTUAKWlAISEAICAAHx8ADExAAsLAAMDAP//Afb2AfT1Af//Av//A+XmA///BP//Bf//Bv//B///Cv//Ef//E///FP//Fv//G///H///Iv//I///KP//Kf//LP//Lf//P///Qv//Q///Rv//SP//TP//U///VP//Vf//V///XP//X///Yv//dP//hv//i///kv//lP//pf//qf//yf//zP//1P//2P//3EJCOf//5///6P///ffvAM7GAMa9AL21AKWcAHNrADc0DZyMAEpCAFpKADEpALWUADkxEPe9AP+9APe1AN6lAJRzGJRrAKVzAIxjCHNSCL2MGN6lIZxzGOetKa17GJRrGO+tKaVzGEohABgIAMC8uuTi4SIVD0Q3MUk8NsTBwDEIAP8AAPcAAO8AAOcAAN4AAM4AAL0AALUAAK0AAKUAAJwAAHMAAGgBAAgAABAICDEpKff39+/v7+fn597e3tbW1s7OzsbGxr29vbW1ta2trZycnHt7e2NjY1JSUkpKSkJCQgEBAf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANAALAAAAAAYAUYBAAj/AKEJHEiwoMGDCBMqFBiAWDFjx4oREyZQmERhxI4lK7awo8ePIEOKHEmypMmTKFOCDNAMBYJeM2KiQOGrJQJJvhAAANDLlwKKKoMKHUq0qNGjQhP06kBplKdPAaJ6GtWJUi9JjRpFlQRJBgpnyYxxREq2rNmzaM8m69Br1KdQcEORkgsXKqcZUQNIcpKoUQeePX0tSxYsreHDiBMXNaYgb4JkyBL4ytnh1AwZlCA5pSuXVIBQnzgFgLSoUaQljGbA3BvJawJiimPLnk3b2DIUf/MGAJA7gNNPn6Za7SDJLdy5oZ56uvxoEelEkiR1kqQoySMZCJYFIJRgLO3v4MOj/0Tmq9dOSZHylspEtVMkSTJcSQUNqquMTp7ivuf0iVIHJ4tIwsgSXDkhySI/ELgTCAH0gsIyQIkn4YQUDoSMeTNsFteGyIHmCSfvoQcKcKBY1VQoUd33SST/ERhAIjKQJkkAPxgBCQAbaKDBBxygkEyFQAYpGzEo9NLJJx1yJldUScL1ISWnUMKJJ56wqNtboXTSwSN5MdIBJEpE9QMRTgAAggYZ7NiBMxEK6eabRzkjQ34dAlfKKHiOIkpUb30W11yflBjAe6fklV4Ab3UiAyNREdEIAI0sEYAiY5Z5ZgYZeLABAj/C6emnKDETAJ0BgDLdXzulqqp6WNKVlzKNKf+gjDO+dIAZJ3cxOmYnADCiBIJjPvpBBgGk+UEAy4Cq7LIeIdPBZ5+MIsNOvJziii655HILLtpmm0sArpxyiimROCVtAMDoFtUvxSRzGyXwBYAgEa0p8cO9NbLoQbGYfgCAM8wGLPBAvsyoFwC8XFtLLK807HBUDjscyyy16NLBg8Goq/EwzDTTjF5J1DgovvcmAQkHUWGagb+EDOwyqMX0EgklAJyiyywR5/xKADs7LMstQOfiCiEZa2y0br6cFsASMixBcoKSgKByv2u+bLWbyFCriyw6d50zLjyhIEACRR9ttjG+6NUVJEY8ncgMIaiMZggAJHD13RRmzUsusHj/7Xcs4DqDDDDpmm14VMEYk4wyyqBwoBJt3+tEjjuG4MHKHRyD9+bgObN336/AUostudAiC89d0+JKM8X8cvjrRgeTAAIxJkLED4l0cPkGmqIZgC/ecS78Ycp87vAspwAwWV46q96M67BHrzExxjAzQyNKKDGD1B94EMKxUa3Z6fDkl5UX6A7bwssxiYNLS8SyuIIAMdLXf7QvMzjRCOVpXh6AB7zpQLLKR0CjiKoWsKAFLnSBLVnoQlQB+IUCXGGL0MFCFwDQjv02qBtgkEcGHEDT1DAFgg/4ixkFTKFQfOEKofECYdeaBS1QULhfIEMArsjhCxvDwR4iTgEo4N0I/zMVwhOq8IgmMYZ5aqaLW8yCYaFzRTJ0s5ZmSEZ5wvChFoPROCHKjXdqGh8Sx9gRZKCAiTjTWS6coZtfJCCCwEgGTYahLuhpEXa/GMbsQHA5THmAQRrYAAqGQcZCJkQBHeDFzfwWv2LoJhiEQEZUiiG2st2Rg8JYRgdEGEg0aYADADOkKAcSAAScohZ+c5gufJHFvJCnaMTohTPseMkNBqMDHxDhpTLVAQWMUpRrOcX7IIY+n+XCWsDLyy+WsQzoJQAAU6xlD+W4gX71cWXz+yUZjdEBV+AsFrUAlyu4lkChWcsWF+zFMpAxjF8IwxfIcN0v0iZNHw7DF3HzgAjTxP8BZWgTiQFAgTAdKC5d4KIWt9BFuFqYxlfMwhW0QoAxooICHtbzjsHwRS4xxS8PoOCfRwzAKW9hrVzIghYKbSEtihk6XSjDdcGA3jEUQMuL9lAYzsgRsTAVyACAtIBZY+ApchELlNoMgV6jhS8sadOmRmWfUfHFTwnoDBjSYhYK1cX7Ioa6hsXCFRZ1qlOZoVOOfnSqwzvGX3QRi1vkEKmp1EUvHClWsQaDGRy45gfEiNa7NQMAN9PFUAGXylfcghfOKFxdnXpX3fkRhX3FWzBQ4ApcWGuYXW0Y6qJyTFYudrHAWEZeMbWBwkT2asuo2WAfljPUYRUAKKDrZxcr2sv/fQAZp7XaMczjiq22NmKxwIUrdiLJ2X42tBuIyjoToAzN5ZZZuxmnZv2muvPMoLjGXSwkeceBVPWCGbB57qfywjXNZrZhsDjmTjqhhEa8MbufFQYKQMCBBUzgAQyALW7FC6do/tZhsLDFcAEgoNsxgp7wXexuARCBClSAAhNoQAD4yl8KDUMA3/JbLQYsgwCE7AcBMIIMEqDYBDtVGQB4gIMdnBfnVrhCytAFLM7bMKy+kMCSelqA4Glisf6CEAyAwIorEIAHoCC8L5aQMASAyswGwIE3LjCIaUQyMsmgGUztcS2LAYAJDPnBDwhlksWTDBn3TLPq5Qkjbve0NsMo/5q1LLGJl8EACnwZAhfw6ZjBk1FU9gxwyUMArXrRCDa3+V5GMBCW71g4ZChDy1EhRge8/OVJ7vk7UwRdADYMW2UMI6PJoIS9Dq0EA/kiGTXlYDMn/DFIB4AZda40si5NG2fgYmdRAUAAyCaQYwCPEoZ+WiNOLececrMxyoAgpIvhAEoPGQIMQDKtEWOMcc44L4QcyDIe04hD36sRGowzM7Dr6ggS4gJfdvADfDntxBjNIBojghI+LLlwvw4YMWXnL1Jdbo0lowFClnW7E+OLiiFAzwX5HSQVIa9OOO4RbGZEq48GDGIg4xjCiMwyEKCAsPT7cMFAgLOHvIA2Ddwsx/+41sERsgwFTBYSlCCEAiyetEQY4RFsPBoymsEMZtKqor7oWCsN94ssZ/cXzFhAuivwAAqfHCnP5AXCDXLkXyQjGe3MSzCWUbAZwFljxch6ANQa9AfR8XVnh3QyEBBwFldgAv58+lnomZBjEOJwGY/n635xjDMqjxj8PloyCDH0BBPDAQ1mcQAqEAELyN0sMYtKQgIQVh960BlLBAACjlE/N0IaGL4YuYMhINXHk0U77EYIgrVIjFqpaiezxPvHI+gMFaf7AqZHinynbhD5Ftt+71RVL5JhHhQUXmPAQIHGcj5npd8+90fRjjEUsvNLJiABfgfA3XcyyNchIO0BeHT/jxPAgEpTAPfQJ0leDiLpuB/S3hz8BRv/upNca/91Ibe3MAgP6TuXPv0isX4G4QyQpRDJMHE3xUbOUn8NggCyZThK8YCM03/P5ngAKBK+sEYGwQxiphDD4IB31AzpEk3P0gzHZzZcpmwBEAzOYHRiBXrON2QTUIAX+BEZCFYDUQyEMEAekQCE8HvRk1Fnly7FcIKGk3zd5xjk9lkhJ3pvR4M12BF5oXmE4AsC4HQKwR2BBzsJMFFalFphZRtb6FSJJ4O8F4UL4WsIQBPuFxL39HX2E1N3lDXMhy5Ek12z03aLR2RniIYLMREn8YBaNgwOYkmPYVygZ3tud359uDnB/3B2EFGEjegykkQ/WhZyc6UbxwB/YmUMXZZuEIAAdnM1xnB3gtMu2oEbHYAqHXBweTFzdyMZkBZy0PRIiTVbCYABbbdiENAAvZBtLlM9qRIAf1Et15ILtYBQuaALU6h5grFfLuMMCTCGGiOHGHVG8McMgthUk6WIQ5ZrWPgpE5UZqHItt3BVLAVgFKNQp8ALHRB0wMgslLSNZiMMCGh5vvAv6qIMcNhUyYB46aYbPKgsw6AMvqAVATADCWMLUFRYEXNtrvBCKNAdArMMzECNeZEM03hJk0UTJXYM7+Vj52ZnRLZieSFhy0JRMrAIRqAVWpWODvkwAUAL36J5yyBtn/9CSUtIccwAfj40WbdRePaIkT50DADJh3tYZL04kP2lfB3ACEkQCb0FOrAgQ7hwCwFgC7VACzTmNXkhWBXFLIQQe4dTDCF5R0RyLine 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> <section>
<h2>Marvelous Unordered List</h2> <h2>Heads Up</h2>
<ul> <p>
<li>No order here</li> reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with
<li>Or here</li> support for CSS 3D transforms to see it in its full glory.
<li>Or here</li> </p>
<li>Or here</li> <p>
</ul> <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
</section> </p>
</section>
<section>
<h2>Fantastic Ordered List</h2> <!-- Example of nested vertical slides -->
<ol> <section>
<li>One is smaller than...</li> <section>
<li>Two is smaller than...</li> <h2>Vertical Slides</h2>
<li>Three!</li> <p>
</ol> Slides can be nested inside of other slides,<br/>
</section> 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> <section>
<h2>Clever Quotes</h2> <h2>Holistic Overview</h2>
<p> <p>
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> Press <em>SPACE</em> to enter the slide overview. This allows you to navigate faster
The nice thing about standards is that there are so many to choose from</q> and block: in larger decks using the keyboard.
</p> </p>
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> <p>
For years there has been a theory that millions of monkeys typing at random on millions of typewriters would This feature is highly experimental and will be updated to boost performance.
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. </p>
</blockquote> </section>
</section>
<section>
<section> <h2>Marvelous Unordered List</h2>
<h2>Pretty Code</h2> <ul>
<pre><code contenteditable> <li>No order here</li>
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || <li>Or here</li>
document.body.style['MozPerspective'] !== undefined || <li>Or here</li>
document.body.style['perspective'] !== undefined; <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>
function linkify( selector ) { <section>
if( supports3DTransforms ) { <h2>Clever Quotes</h2>
<p>
var nodes = document.querySelectorAll( selector ); 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;
for( var i = 0, len = nodes.length; i < len; i++ ) { function linkify( selector ) {
var node = nodes[i]; if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
if( !node.className || !node.className.match( /roll/g ) ) { for( var i = 0, len = nodes.length; i < len; i++ ) {
node.className += ' roll'; var node = nodes[i];
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
}
};
}
}
linkify( 'a' ); if( !node.className || !node.className.match( /roll/g ) ) {
</code></pre> node.className += ' roll';
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
</section> }
};
<section> }
<h2>Intergalactic Interconnections</h2> }
<p>
You can link between slides internally,<br/>
<a href="#/2/3">like this</a>.
</p>
</section>
<section> linkify( 'a' );
<h2>Fragmented Views</h2> </code></pre>
<p>Hit the next arrow...</p> <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
<p class="fragment">... to step through ...</p> </section>
<ol>
<li class="fragment"><code>any type</code></li> <section>
<li class="fragment"><em>of view</em></li> <h2>Intergalactic Interconnections</h2>
<li class="fragment"><strong>fragments</strong></li> <p>
</ol> You can link between slides internally,<br/>
</section> <a href="#/2/3">like this</a>.
</p>
<section> </section>
<h2>Spectacular image!</h2>
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank"> <section>
<img src="data:image/png;base64,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 truncated <h2>Fragmented Views</h2>
</a> <p>Hit the next arrow...</p>
</section> <p class="fragment">... to step through ...</p>
<ol>
<section> <li class="fragment"><code>any type</code></li>
<h2>Stellar Links</h2> <li class="fragment"><em>of view</em></li>
<ul> <li class="fragment"><strong>fragments</strong></li>
<li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li> </ol>
<li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li> </section>
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
</ul> <section>
</section> <h2>Spectacular image!</h2>
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
<section> <img src="data:image/png;base64,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 truncated
<h1>THE END</h1> </a>
<h3 class="inverted">BY Hakim El Hattab / hakim.se</h3> </section>
</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>
</div>
<!-- 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>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</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="js/reveal.js"></script>
<script src="lib/highlight.js"></script> <script src="lib/highlight.js"></script>
<script> <script>
@@ -220,45 +223,6 @@ linkify( 'a' );
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
</script> </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> </body>
</html> </html>
js/reveal.js
+26 -19
View File
@@ -67,7 +67,11 @@
* - Slides that contain nested-slides are given the 'stack' class * - Slides that contain nested-slides are given the 'stack' class
* *
* version 1.2: * 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 * @author Hakim El Hattab | http://hakim.se
@@ -75,8 +79,8 @@
*/ */
var Reveal = (function(){ var Reveal = (function(){
var HORIZONTAL_SLIDES_SELECTOR = '#reveal>section', var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
VERTICAL_SLIDES_SELECTOR = 'section.present>section', VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
// The horizontal and verical index of the currently active slide // The horizontal and verical index of the currently active slide
indexh = 0, indexh = 0,
@@ -105,13 +109,14 @@ var Reveal = (function(){
*/ */
function initialize( options ) { function initialize( options ) {
// Cache references to DOM elements // Cache references to DOM elements
dom.progress = document.querySelector( 'body>.progress' ); dom.wrapper = document.querySelector( '#reveal' );
dom.progressbar = document.querySelector( 'body>.progress span' ); dom.progress = document.querySelector( '#reveal .progress' );
dom.controls = document.querySelector( '.controls' ); dom.progressbar = document.querySelector( '#reveal .progress span' );
dom.controlsLeft = document.querySelector( '.controls .left' ); dom.controls = document.querySelector( '#reveal .controls' );
dom.controlsRight = document.querySelector( '.controls .right' ); dom.controlsLeft = document.querySelector( '#reveal .controls .left' );
dom.controlsUp = document.querySelector( '.controls .up' ); dom.controlsRight = document.querySelector( '#reveal .controls .right' );
dom.controlsDown = document.querySelector( '.controls .down' ); dom.controlsUp = document.querySelector( '#reveal .controls .up' );
dom.controlsDown = document.querySelector( '#reveal .controls .down' );
// Bind all view events // Bind all view events
document.addEventListener('keydown', onDocumentKeyDown, false); document.addEventListener('keydown', onDocumentKeyDown, false);
@@ -143,11 +148,11 @@ var Reveal = (function(){
} }
if( config.transition !== 'default' ) { if( config.transition !== 'default' ) {
document.body.classList.add( config.transition ); dom.wrapper.classList.add( config.transition );
} }
if( config.theme !== 'default' ) { if( config.theme !== 'default' ) {
document.body.classList.add( config.theme ); dom.wrapper.classList.add( config.theme );
} }
if( config.rollingLinks ) { if( config.rollingLinks ) {
@@ -270,7 +275,7 @@ var Reveal = (function(){
*/ */
function linkify() { function linkify() {
if( supports3DTransforms ) { 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++ ) { for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i]; var node = nodes[i];
@@ -291,7 +296,7 @@ var Reveal = (function(){
* can't be improved. * can't be improved.
*/ */
function activateOverview() { function activateOverview() {
document.body.classList.add( 'overview' ); dom.wrapper.classList.add( 'overview' );
var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
@@ -307,8 +312,10 @@ var Reveal = (function(){
hslide.style.OTransform = htransform; hslide.style.OTransform = htransform;
hslide.style.transform = htransform; hslide.style.transform = htransform;
// Navigate to this slide on click if( !hslide.classList.contains( 'stack' ) ) {
hslide.addEventListener( 'click', onOverviewSlideClicked, true ); // Navigate to this slide on click
hslide.addEventListener( 'click', onOverviewSlideClicked, true );
}
var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) ); var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) );
@@ -336,9 +343,9 @@ var Reveal = (function(){
* active slide. * active slide.
*/ */
function deactivateOverview() { 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++ ) { for( var i = 0, len = slides.length; i < len; i++ ) {
var element = slides[i]; var element = slides[i];
@@ -363,7 +370,7 @@ var Reveal = (function(){
* false otherwise * false otherwise
*/ */
function overviewIsActive() { function overviewIsActive() {
return document.body.classList.contains( 'overview' ); return dom.wrapper.classList.contains( 'overview' );
} }
/** /**