xobs/lca2020-pay-it-forward
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added new transitions (box/page) and a ui theme (neon)

Browse Source
This commit is contained in:
Hakim El Hattab
2011-12-26 00:00:38 -08:00
parent 1ac6386eef
commit c7c7735e7a
3 changed files with 511 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

640
css/main.css
View File

@@ -94,199 +94,6 @@ h1 {
}
/*********************************************
* SLIDES
*********************************************/
#main {
position: absolute;
width: 900px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -450px;
margin-top: -320px;
padding: 20px 0px;
text-align: center;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
-ms-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
}
#main>section,
#main>section>section {
display: none;
position: absolute;
width: 100%;
min-height: 600px;
z-index: 10;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-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);
}
#main section.present {
display: block;
z-index: 11;
opacity: 1;
}
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.past {
display: block;
opacity: 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);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
#main section.future {
display: block;
opacity: 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);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
#main section>section.past {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-moz-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);
}
#main section>section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-moz-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);
}
/*********************************************
* CONCAVE THEME
*********************************************/
.concave #main>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 #main>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 #main 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 #main 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);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
/*********************************************
* LINEAR THEME
*********************************************/
.linear #main>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 #main>section.future {
-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 #main 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 #main section>section.future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
-o-transform: translate(0, 150%);
transform: translate(0, 150%);
}
/*********************************************
* OVERVIEW
*********************************************/
.overview #main section {
padding: 20px 0;
opacity: 1;
cursor: pointer;
background: rgba(0,0,0,0.1);
}
.overview #main section.present>section.present {
background: none;
}
.overview #main section>section {
opacity: 1;
cursor: pointer;
}
.overview #main>section:hover {
background: rgba(0,0,0,0.3);
}
.overview #main>section.present {
background: rgba(0,0,0,0.3);
}
/*********************************************
* VIEW FRAGMENTS
*********************************************/
@@ -599,3 +406,450 @@ section img {
}
/*********************************************
* SLIDES
*********************************************/
#main {
position: absolute;
width: 900px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -450px;
margin-top: -320px;
padding: 20px 0px;
text-align: center;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
-ms-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
}
#main>section,
#main>section>section {
display: none;
position: absolute;
width: 100%;
min-height: 600px;
z-index: 10;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-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);
}
#main section.present {
display: block;
z-index: 11;
opacity: 1;
}
/*********************************************
* DEFAULT TRANSITION
*********************************************/
#main section.past {
display: block;
opacity: 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);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
#main section.future {
display: block;
opacity: 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);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
#main section>section.past {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-moz-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);
}
#main section>section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-moz-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);
}
/*********************************************
* CONCAVE TRANSITION
*********************************************/
.concave #main>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 #main>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 #main 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 #main 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);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
/*********************************************
* LINEAR TRANSITION
*********************************************/
.linear #main>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 #main>section.future {
-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 #main 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 #main section>section.future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
-o-transform: translate(0, 150%);
transform: translate(0, 150%);
}
/*********************************************
* BOX TRANSITION
*********************************************/
.box #main {
margin-top: -350px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
-ms-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
-ms-perspective: 1300px;
perspective: 1300px;
}
.box #main section {
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box #main section:not(.stack):before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #292929;
border-radius: 4px;
-webkit-transform: translateZ( -20px );
-moz-transform: translateZ( -20px );
-ms-transform: translateZ( -20px );
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
.box #main section:not(.stack):after {
content: '';
position: absolute;
display: block;
width: 90%;
height: 30px;
left: 5%;
bottom: 0;
background: none;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
-webkit-transform: translateZ(-90px) rotateX( 65deg );
-moz-transform: translateZ(-90px) rotateX( 65deg );
-ms-transform: translateZ(-90px) rotateX( 65deg );
-o-transform: translateZ(-90px) rotateX( 65deg );
transform: translateZ(-90px) rotateX( 65deg );
}
.box #main section.stack {
padding: 0;
background: none;
}
.box #main>section.past {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
}
.box #main>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
transform: translate3d(100%, 0, 0) rotateY(90deg);
}
.box #main section>section.past {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
-moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
-ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
transform: translate3d(0, -100%, 0) rotateX(90deg);
}
.box #main section>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
-moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
-ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
transform: translate3d(0, 100%, 0) rotateX(-90deg);
}
/*********************************************
* PAGE TRANSITION
*********************************************/
.page #main {
margin-top: -350px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-perspective: 3000px;
perspective: 3000px;
}
.page #main section {
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page #main section.past {
z-index: 12;
}
.page #main section:not(.stack):before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #292929;
-webkit-transform: translateZ( -20px );
-moz-transform: translateZ( -20px );
-ms-transform: translateZ( -20px );
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
.page #main section:not(.stack):after {
content: '';
position: absolute;
display: block;
width: 90%;
height: 30px;
left: 5%;
bottom: 0;
background: none;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
-webkit-transform: translateZ(-90px) rotateX( 65deg );
}
.page #main section.stack {
padding: 0;
background: none;
}
.page #main>section.past {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
-moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
-ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
transform: translate3d(-40%, 0, 0) rotateY(-80deg);
}
.page #main>section.future {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page #main section>section.past {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
-moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
-ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
transform: translate3d(0, -40%, 0) rotateX(80deg);
}
.page #main section>section.future {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*********************************************
* NEON THEME
*********************************************/
.neon a,
.neon a:hover,
.neon .controls a.enabled {
color: #5de048;
}
.neon .progress span,
.neon .roll span:after {
background: #5de048;
}
a.image:hover img {
border-color: #5de048;
}
/*********************************************
* OVERVIEW
*********************************************/
.overview #main section {
padding: 20px 0;
opacity: 1;
cursor: pointer;
background: rgba(0,0,0,0.1);
}
.overview #main section:after,
.overview #main section:before {
display: none !important;
}
.overview #main section>section {
opacity: 1;
cursor: pointer;
}
.overview #main section:hover {
background: rgba(0,0,0,0.3);
}
.overview #main section.present {
background: rgba(0,0,0,0.3);
}
.overview #main section.stack {
background: none;
padding: 0;
}

51
index.html
View File

@@ -195,6 +195,12 @@ linkify( 'a' );
<script src="js/reveal.js"></script>
<script src="lib/highlight.js"></script>
<script>
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
@@ -205,13 +211,54 @@ linkify( 'a' );
// Apply a 3D roll to links on hover
rollingLinks: true,
// Styling themes, only affects transitions for now
theme: 'default' // default/concave/linear
// UI style
theme: query.theme || 'default', // default/neon
// Transition style
transition: query.transition || 'default' // default/box/page/concave/linear(2d),
});
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>

16
js/reveal.js
View File

@@ -62,6 +62,9 @@
* version 1.1:
* - Optional progress bar UI element
* - Slide overview available via SPACE
* - Added 'transition' option for specifying transition styles
* - Added 'theme' option for specifying UI styles
* - Slides that contain nested-slides are given the 'stack' class
*
* TODO:
* - Touch/swipe interactions
@@ -83,6 +86,7 @@ var Reveal = (function(){
// > {Boolean} controls
// > {Boolean} progress
// > {String} theme
// > {String} transition
// > {Boolean} rollingLinks
config = {},
@@ -122,11 +126,12 @@ var Reveal = (function(){
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
config.controls = options.controls === undefined ? false : options.controls;
config.progress = options.progress === undefined ? false : options.progress;
config.transition = options.transition === undefined ? 'default' : options.transition;
config.theme = options.theme === undefined ? 'default' : options.theme;
// Fall back on the 2D transform theme 'linear'
if( supports3DTransforms === false ) {
config.theme = 'linear';
config.transition = 'linear';
}
if( config.controls ) {
@@ -137,6 +142,10 @@ var Reveal = (function(){
dom.progress.style.display = 'block';
}
if( config.transition !== 'default' ) {
document.body.classList.add( config.transition );
}
if( config.theme !== 'default' ) {
document.body.classList.add( config.theme );
}
@@ -417,6 +426,11 @@ var Reveal = (function(){
// Any element subsequent to index is given the 'future' class
slide.setAttribute('class', 'future');
}
// If this element contains vertical slides
if( slide.querySelector( 'section' ) ) {
slide.classList.add( 'stack' );
}
}
}
else {