From adc9ad19cebd73b863558c80dd03c223b427c669 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 23 Dec 2011 00:36:37 -0800 Subject: [PATCH] fallback on 2d transform transitions via feature detect --- css/main.css | 43 ++++++++++++++++++++++++------------------- index.html | 3 +-- 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%); } diff --git a/index.html b/index.html index 2e7a002..c7e6e7a 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ support for CSS 3D transforms to see it in its full glory.

- - Hakim El Hattab + - Hakim El Hattab / @hakimel

@@ -202,6 +202,5 @@ linkify( 'a' ); - \ 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)' );