fallback on 2d transform transitions via feature detect
This commit is contained in:
parent
f6dc531298
commit
adc9ad19ce
43
css/main.css
43
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>
|
17
js/reveal.js
17
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)' );
|
||||
|
Loading…
Reference in New Issue
Block a user