xobs/lca2019-talk
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,11 +124,12 @@ h1 {
#main>section, #main>section,
#main>section>section { #main>section>section {
display: none; display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
min-height: 600px; min-height: 600px;
z-index: 10;
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
@@ -143,8 +144,8 @@ h1 {
#main section.present { #main section.present {
display: block; display: block;
position: absolute; z-index: 11;
z-index: 10; opacity: 1;
} }
@@ -229,30 +230,34 @@ h1 {
*********************************************/ *********************************************/
.linear #main>section.past { .linear #main>section.past {
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate(-150%, 0);
-moz-transform: translate3d(-100%, 0, 0); -moz-transform: translate(-150%, 0);
-ms-transform: translate3d(-100%, 0, 0); -ms-transform: translate(-150%, 0);
transform: translate3d(-100%, 0, 0); -o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
} }
.linear #main>section.future { .linear #main>section.future {
-webkit-transform: translate3d(100%, 0, 0); -webkit-transform: translate(150%, 0);
-moz-transform: translate3d(100%, 0, 0); -moz-transform: translate(150%, 0);
-ms-transform: translate3d(100%, 0, 0); -ms-transform: translate(150%, 0);
transform: translate3d(100%, 0, 0); -o-transform: translate(150%, 0);
transform: translate(150%, 0);
} }
.linear #main section>section.past { .linear #main section>section.past {
-webkit-transform: translate3d(0, -100%, 0); -webkit-transform: translate(0, -150%);
-moz-transform: translate3d(0, -100%, 0); -moz-transform: translate(0, -150%);
-ms-transform: translate3d(0, -100%, 0); -ms-transform: translate(0, -150%);
transform: translate3d(0, -100%, 0); -o-transform: translate(0, -150%);
transform: translate(0, -150%);
} }
.linear #main section>section.future { .linear #main section>section.future {
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate(0, 150%);
-moz-transform: translate3d(0, 100%, 0); -moz-transform: translate(0, 150%);
-ms-transform: translate3d(0, 100%, 0); -ms-transform: translate(0, 150%);
transform: translate3d(0, 100%, 0); -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. support for CSS 3D transforms to see it in its full glory.
</p> </p>
<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> </p>
</section> </section>
@@ -202,6 +202,5 @@ linkify( 'a' );
</script> </script>
</body> </body>
</html> </html>

17
js/reveal.js
View File

@@ -86,7 +86,13 @@ var Reveal = (function(){
config = {}, config = {},
// Cached references to DOM elements // 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 * Starts up the slideshow by applying configuration
@@ -117,6 +123,11 @@ var Reveal = (function(){
config.progress = options.progress === undefined ? false : options.progress; config.progress = options.progress === undefined ? false : options.progress;
config.theme = options.theme === undefined ? 'default' : options.theme; 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 ) { if( config.controls ) {
dom.controls.style.display = 'block'; dom.controls.style.display = 'block';
} }
@@ -240,9 +251,7 @@ var Reveal = (function(){
* Wrap all links in 3D goodness. * Wrap all links in 3D goodness.
*/ */
function linkify() { function linkify() {
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
document.body.style['MozPerspective'] !== undefined ||
document.body.style['perspective'] !== undefined;
if( supports3DTransforms ) { if( supports3DTransforms ) {
var nodes = document.querySelectorAll( 'section a:not(.image)' ); var nodes = document.querySelectorAll( 'section a:not(.image)' );