diff options
| -rw-r--r-- | css/reveal.css | 2 | ||||
| -rw-r--r-- | css/reveal.scss | 3 | ||||
| -rw-r--r-- | js/reveal.js | 14 |
3 files changed, 12 insertions, 7 deletions
diff --git a/css/reveal.css b/css/reveal.css index 67986b6..35a048f 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -627,7 +627,7 @@ body { /********************************************* * OVERVIEW *********************************************/ -.reveal.overview .slides { +.reveal.overview { -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-perspective: 700px; diff --git a/css/reveal.scss b/css/reveal.scss index 1c48154..a1c14a1 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -743,11 +743,10 @@ body { * OVERVIEW *********************************************/ -.reveal.overview .slides { +.reveal.overview { perspective-origin: 50% 50%; perspective: 700px; } - .reveal.overview .slides section { height: 700px; overflow: hidden; diff --git a/js/reveal.js b/js/reveal.js index 4d5fdd3..5805ee9 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -165,6 +165,9 @@ // The current scale of the presentation (see width/height config) scale = 1, + // The current z position of the presentation container + z = 0, + // Cached references to DOM elements dom = {}, @@ -1470,6 +1473,7 @@ // Prefer zooming in desktop Chrome so that content remains crisp if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { dom.slides.style.zoom = scale; + transformElement( dom.slides, 'translateZ(-'+ z +'px)' ); } // Apply scale transform as a fallback else { @@ -1477,7 +1481,7 @@ dom.slides.style.top = '50%'; dom.slides.style.bottom = 'auto'; dom.slides.style.right = 'auto'; - transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +')' ); + transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +')' + ' translateZ(-'+ z +'px)' ); } } @@ -1635,8 +1639,10 @@ var wasActive = dom.wrapper.classList.contains( 'overview' ); - // Vary the depth of the overview based on screen size - var depth = window.innerWidth < 400 ? 1000 : 2500; + // Set the depth of the presentation. This determinse how far we + // zoom out and varies based on display size. It gets applied at + // the layout step. + z = window.innerWidth < 400 ? 1000 : 2500; dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.remove( 'overview-deactivating' ); @@ -1653,7 +1659,7 @@ hbackground = horizontalBackgrounds[i], hoffset = config.rtl ? -105 : 105; - var htransform = 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)'; + var htransform = 'translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)'; hslide.setAttribute( 'data-index-h', i ); |