From 6619bc62bdde24bf79769c5ed63ac931e127d7f6 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Sat, 13 Oct 2012 10:28:34 -0400
Subject: [PATCH] add zoom transition
---
README.md | 2 +-
css/reveal.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 4 +++-
js/reveal.js | 4 ++--
js/reveal.min.js | 2 +-
5 files changed, 57 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index 5b1684e..c14ede9 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ Reveal.initialize({
rollingLinks: true,
// Transition style
- transition: 'default' // default/cube/page/concave/linear(2d)
+ transition: 'default' // default/cube/page/concave/zoom/linear/none
});
```
diff --git a/css/reveal.css b/css/reveal.css
index 00f7920..358d954 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -537,6 +537,56 @@ body {
}
+/*********************************************
+ * ZOOM TRANSITION
+ *********************************************/
+
+.reveal.zoom .slides>section,
+.reveal.zoom .slides>section>section {
+ -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+.reveal.zoom .slides>section.past {
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transform: scale(16);
+ -moz-transform: scale(16);
+ -ms-transform: scale(16);
+ -o-transform: scale(16);
+ transform: scale(16);
+}
+.reveal.zoom .slides>section.future {
+ opacity: 0;
+ visibility: hidden;
+
+ -webkit-transform: scale(0.2);
+ -moz-transform: scale(0.2);
+ -ms-transform: scale(0.2);
+ -o-transform: scale(0.2);
+ transform: scale(0.2);
+}
+
+.reveal.zoom .slides>section>section.past {
+ -webkit-transform: translate(0, -150%);
+ -moz-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ -o-transform: translate(0, -150%);
+ transform: translate(0, -150%);
+}
+.reveal.zoom .slides>section>section.future {
+ -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 TRANSITION
*********************************************/
diff --git a/index.html b/index.html
index 5dba9a4..3ea2412 100644
--- a/index.html
+++ b/index.html
@@ -151,7 +151,9 @@
<a href="?transition=cube#/transitions">Cube</a> -
<a href="?transition=page#/transitions">Page</a> -
<a href="?transition=concave#/transitions">Concave</a> -
+ <a href="?transition=zoom#/transitions">Zoom</a> -
<a href="?transition=linear#/transitions">Linear</a> -
+ <a href="?transition=none#/transitions">None</a> -
<a href="?#/transitions">Default</a>
</p>
</section>
@@ -335,7 +337,7 @@ function linkify( selector ) {
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
- transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
+ transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
diff --git a/js/reveal.js b/js/reveal.js
index 3dcedf0..8b19c46 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1,5 +1,5 @@
/*!
- * reveal.js 2.1 r30
+ * reveal.js 2.1 r31
* http://lab.hakim.se/reveal-js
* MIT licensed
*
@@ -46,7 +46,7 @@ var Reveal = (function(){
theme: null,
// Transition style
- transition: 'default', // default/cube/page/concave/linear(2d),
+ transition: 'default', // default/cube/page/concave/zoom/linear/none
// Script dependencies to load
dependencies: []
diff --git a/js/reveal.min.js b/js/reveal.min.js
index bb03527..5568ab3 100644
--- a/js/reveal.min.js
+++ b/js/reveal.min.js
@@ -1,5 +1,5 @@
/*!
- * reveal.js 2.1 r30
+ * reveal.js 2.1 r31
* http://lab.hakim.se/reveal-js
* MIT licensed
*
--
GitLab