xobs/lca2020-pay-it-forward
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fallback on 2d transform transitions via feature detect

Browse Source
This commit is contained in:
Hakim El Hattab
2011-12-23 00:36:37 -08:00
parent f6dc531298
commit adc9ad19ce
3 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/main.css
View File

@@ -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%);
}

3
index.html
View File

@@ -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
View File

@@ -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)' );