diff options
| -rw-r--r-- | css/main.css | 18 | ||||
| -rw-r--r-- | index.html | 16 | ||||
| -rw-r--r-- | js/reveal.js | 3 |
3 files changed, 24 insertions, 13 deletions
diff --git a/css/main.css b/css/main.css index e32c8c0..da48245 100644 --- 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%; @@ -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 c3b5cc9..5f99770 100644 --- 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'; |