xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

major, non backwards compatible, restructuring of DOM tree

Browse Source
This commit is contained in:
Hakim El Hattab
2011-12-26 21:29:00 -08:00
parent 5b2b3fa3df
commit daecc258d7
4 changed files with 322 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
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

209
css/main.css
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,20 +69,20 @@ 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,
@@ -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;
@@ -423,6 +429,12 @@ section img {
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;
-ms-perspective: 600px; -ms-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;
} }

54
index.html
View File

@@ -16,9 +16,10 @@
<body> <body>
<!-- Any section element inside of this container is displayed as a slide -->
<div id="reveal"> <div id="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section> <section>
<h1>Reveal.js</h1> <h1>Reveal.js</h1>
<h3 class="inverted">A CSS 3D Slideshow</h3> <h3 class="inverted">A CSS 3D Slideshow</h3>
@@ -115,11 +116,11 @@
<section> <section>
<h2>Pretty Code</h2> <h2>Pretty Code</h2>
<pre><code contenteditable> <pre><code contenteditable>
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
document.body.style['MozPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined ||
document.body.style['perspective'] !== undefined; document.body.style['perspective'] !== undefined;
function linkify( selector ) { function linkify( selector ) {
if( supports3DTransforms ) { if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector ); var nodes = document.querySelectorAll( selector );
@@ -133,9 +134,9 @@ function linkify( selector ) {
} }
}; };
} }
} }
linkify( 'a' ); linkify( 'a' );
</code></pre> </code></pre>
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section> </section>
@@ -179,9 +180,9 @@ linkify( 'a' );
<h1>THE END</h1> <h1>THE END</h1>
<h3 class="inverted">BY Hakim El Hattab / hakim.se</h3> <h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
</section> </section>
</div> </div>
<!-- The navigational controls UI -->
<aside class="controls"> <aside class="controls">
<a class="left" href="#">&#x25C4;</a> <a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a> <a class="right" href="#">&#x25BA;</a>
@@ -192,6 +193,8 @@ linkify( 'a' );
<!-- Displays presentation progress, max value changes via JS to reflect # of slides --> <!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div> <div class="progress"><span></span></div>
</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>
@@ -221,44 +224,5 @@ 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>

41
js/reveal.js
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;
if( !hslide.classList.contains( 'stack' ) ) {
// Navigate to this slide on click // Navigate to this slide on click
hslide.addEventListener( 'click', onOverviewSlideClicked, true ); 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' );
} }
/** /**