updated copy in slides, added one that explains transitions

diff --git a/css/main.css b/css/main.css
index e32c8c0992b9a2b9176ac854df34f02975193a40..da4824599e5f0521999c129d7cc5f8dd50f59178 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -586,7 +586,7 @@ html {
  * BOX TRANSITION
  *********************************************/
 
-#reveal.box .slides {
+#reveal.cube .slides {
        margin-top: -350px;
 
        -webkit-perspective-origin: 50% 25%;
@@ -600,14 +600,14 @@ html {
                perspective: 1300px;
 }
 
-#reveal.box .slides section {
+#reveal.cube .slides section {
        padding: 30px;
        
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
 }
-       #reveal.box .slides section:not(.stack):before {
+       #reveal.cube .slides section:not(.stack):before {
                content: '';
                position: absolute;
                display: block;
@@ -624,7 +624,7 @@ html {
                     -o-transform: translateZ( -20px );
                        transform: translateZ( -20px );
        }
-       #reveal.box .slides section:not(.stack):after {
+       #reveal.cube .slides section:not(.stack):after {
                content: '';
                position: absolute;
                display: block;
@@ -645,12 +645,12 @@ html {
                        transform: translateZ(-90px) rotateX( 65deg );
        }
 
-#reveal.box .slides>section.stack {
+#reveal.cube .slides>section.stack {
        padding: 0;
        background: none;
 }
 
-#reveal.box .slides>section.past {
+#reveal.cube .slides>section.past {
        -webkit-transform-origin: 100% 0%;
           -moz-transform-origin: 100% 0%;
            -ms-transform-origin: 100% 0%;
@@ -662,7 +662,7 @@ html {
                transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 }
 
-#reveal.box .slides>section.future {
+#reveal.cube .slides>section.future {
        -webkit-transform-origin: 0% 0%;
           -moz-transform-origin: 0% 0%;
            -ms-transform-origin: 0% 0%;
@@ -674,7 +674,7 @@ html {
                transform: translate3d(100%, 0, 0) rotateY(90deg);
 }
 
-#reveal.box .slides>section>section.past {
+#reveal.cube .slides>section>section.past {
        -webkit-transform-origin: 0% 100%;
           -moz-transform-origin: 0% 100%;
            -ms-transform-origin: 0% 100%;
@@ -686,7 +686,7 @@ html {
                transform: translate3d(0, -100%, 0) rotateX(90deg);
 }
 
-#reveal.box .slides>section>section.future {
+#reveal.cube .slides>section>section.future {
        -webkit-transform-origin: 0% 0%;
           -moz-transform-origin: 0% 0%;
            -ms-transform-origin: 0% 0%;

diff --git a/index.html b/index.html
index 93bb2dd558c3027294a5f086bc586b0d49283e84..8251079c70921dce3981fe57453a92cbc247ad06 100644 (file)
--- a/index.html
+++ b/index.html
@@ -74,12 +74,20 @@
                                <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.
+                                               Press <strong>SPACE</strong> to enter the slide overview.
                                        </p>
+                               </section>
+
+                               <section>
+                                       <h2>Transition Styles</h2>
                                        <p>
-                                               This feature is highly experimental and will be updated to boost performance.
+                                               You can select from different transitions, like:
                                        </p>
+                                       <ul>
+                                               <li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li>
+                                               <li><a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a></li>
+                                               <li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
+                                       </ul>
                                </section>
                                        
                                <section>
@@ -218,7 +226,7 @@
                                theme: query.theme || 'default', // default/neon
 
                                // Transition style
-                               transition: query.transition || 'default' // default/box/page/concave/linear(2d),
+                               transition: query.transition || 'default' // default/cube/page/concave/linear(2d),
                        });
 
                        hljs.initHighlightingOnLoad();

diff --git a/js/reveal.js b/js/reveal.js
index c3b5cc9f9a9c411ea76b685c4befb934f1c02241..5f99770e2c21f655da6d55f7ee945b8918781091 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -134,6 +134,9 @@ var Reveal = (function(){
                config.transition = options.transition === undefined ? 'default' : options.transition;
                config.theme = options.theme === undefined ? 'default' : options.theme;
 
+               // Transition alias
+               if( config.transition === 'box' ) config.transition = 'cube';
+
                // Fall back on the 2D transform theme 'linear'
                if( supports3DTransforms === false ) {
                        config.transition = 'linear';