From e0aba9f5aec9d1bea9f1b1729d5f6022e412196c Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Sat, 17 Jan 2015 10:33:18 +0100
Subject: [PATCH] apply z position to slide container, rather than individual
slides
---
css/reveal.css | 2 +-
css/reveal.scss | 3 +--
js/reveal.js | 14 ++++++++++----
3 files changed, 12 insertions(+), 7 deletions(-)
diff --git a/css/reveal.css b/css/reveal.css
index 67986b6b..35a048fa 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 1c481548..a1c14a1e 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 4d5fdd3b..5805ee90 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 );
--
GitLab