From adc9ad19cebd73b863558c80dd03c223b427c669 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
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.
</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)' );
--
GitLab