dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

apply z position to slide container, rather than individual slides

This commit is contained in:
Hakim El Hattab 2015-01-17 10:33:18 +01:00
parent 66d7b6bfae
commit e0aba9f5ae
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/reveal.css
View File

@ -627,7 +627,7 @@ body {
/********************************************* /*********************************************
* OVERVIEW * OVERVIEW
*********************************************/ *********************************************/
.reveal.overview .slides { .reveal.overview {
-webkit-perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%; perspective-origin: 50% 50%;
-webkit-perspective: 700px; -webkit-perspective: 700px;

3
css/reveal.scss
View File

@ -743,11 +743,10 @@ body {
* OVERVIEW * OVERVIEW
*********************************************/ *********************************************/
.reveal.overview .slides { .reveal.overview {
perspective-origin: 50% 50%; perspective-origin: 50% 50%;
perspective: 700px; perspective: 700px;
} }
.reveal.overview .slides section { .reveal.overview .slides section {
height: 700px; height: 700px;
overflow: hidden; overflow: hidden;

14
js/reveal.js
View File

@ -165,6 +165,9 @@
// The current scale of the presentation (see width/height config) // The current scale of the presentation (see width/height config)
scale = 1, scale = 1,
// The current z position of the presentation container
z = 0,
// Cached references to DOM elements // Cached references to DOM elements
dom = {}, dom = {},
@ -1470,6 +1473,7 @@
// Prefer zooming in desktop Chrome so that content remains crisp // Prefer zooming in desktop Chrome so that content remains crisp
if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) {
dom.slides.style.zoom = scale; dom.slides.style.zoom = scale;
transformElement( dom.slides, 'translateZ(-'+ z +'px)' );
} }
// Apply scale transform as a fallback // Apply scale transform as a fallback
else { else {
@ -1477,7 +1481,7 @@
dom.slides.style.top = '50%'; dom.slides.style.top = '50%';
dom.slides.style.bottom = 'auto'; dom.slides.style.bottom = 'auto';
dom.slides.style.right = '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' ); var wasActive = dom.wrapper.classList.contains( 'overview' );
// Vary the depth of the overview based on screen size // Set the depth of the presentation. This determinse how far we
var depth = window.innerWidth < 400 ? 1000 : 2500; // 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.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' ); dom.wrapper.classList.remove( 'overview-deactivating' );
@ -1653,7 +1659,7 @@
hbackground = horizontalBackgrounds[i], hbackground = horizontalBackgrounds[i],
hoffset = config.rtl ? -105 : 105; 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 ); hslide.setAttribute( 'data-index-h', i );