diff options
| -rw-r--r-- | css/main.css | 43 | ||||
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | js/reveal.js | 17 |
3 files changed, 38 insertions, 25 deletions
diff --git a/css/main.css b/css/main.css index 851d262..1effe17 100644 --- a/css/main.css +++ b/css/main.css @@ -124,10 +124,11 @@ h1 { #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; @@ -143,8 +144,8 @@ h1 { #main section.present { display: block; - position: absolute; - z-index: 10; + z-index: 11; + opacity: 1; } @@ -229,30 +230,34 @@ h1 { *********************************************/ .linear #main>section.past { - -webkit-transform: translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + -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: translate3d(100%, 0, 0); - -moz-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + -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: translate3d(0, -100%, 0); - -moz-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + -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: translate3d(0, 100%, 0); - -moz-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); } @@ -36,7 +36,7 @@ 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></small></i> + <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i> </p> </section> @@ -202,6 +202,5 @@ linkify( 'a' ); </script> - </body> </html>
\ No newline at end of file diff --git a/js/reveal.js b/js/reveal.js index 3dddf7d..01c7e8f 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -86,7 +86,13 @@ var Reveal = (function(){ config = {}, // Cached references to DOM elements - dom = {}; + dom = {}, + + // Detect support for CSS 3D transforms + supports3DTransforms = document.body.style['perspectiveProperty'] !== undefined || + document.body.style['WebkitPerspective'] !== undefined || + document.body.style['MozPerspective'] !== undefined || + document.body.style['msTransform'] !== undefined; /** * Starts up the slideshow by applying configuration @@ -117,6 +123,11 @@ var Reveal = (function(){ config.progress = options.progress === undefined ? false : options.progress; config.theme = options.theme === undefined ? 'default' : options.theme; + // Fall back on the 2D transform theme 'linear' + if( supports3DTransforms === false ) { + config.theme = 'linear'; + } + if( config.controls ) { dom.controls.style.display = 'block'; } @@ -240,9 +251,7 @@ var Reveal = (function(){ * Wrap all links in 3D goodness. */ function linkify() { - var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || - document.body.style['MozPerspective'] !== undefined || - document.body.style['perspective'] !== undefined; + if( supports3DTransforms ) { var nodes = document.querySelectorAll( 'section a:not(.image)' ); |