add zoom transition
authorHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 13 Oct 2012 14:28:34 +0000 (10:28 -0400)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 13 Oct 2012 14:28:34 +0000 (10:28 -0400)
README.md
css/reveal.css
index.html
js/reveal.js
js/reveal.min.js

index 5b1684e6b9d4a6992a0a365be8bc124b8267461c..c14ede94d81a0d5bc11600a6d26153cfc5567742 100644 (file)
--- 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
 });
 ```
 
index 00f7920ac66e4cea9c2be4fad982d2f8681dc029..358d954f4705bc5e6304b19a808080f60ac16c18 100644 (file)
@@ -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
  *********************************************/
index 5dba9a452b7846f3acd59fe143f51f23a20b7a92..3ea2412cd8ee8d022f658b6b6454cedad5d0711d 100644 (file)
                                                <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: [
index 3dcedf0d6fb9fa40b82c3007cafd7485aa96d8dc..8b19c46a6a680809800d74402814ef9089bcc2eb 100644 (file)
@@ -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: []
index bb035270055c9011d60f0113915617529c028465..5568ab3414e8e4163edbf8210e3b186e56e40e67 100644 (file)
@@ -1,5 +1,5 @@
 /*!
- * reveal.js 2.1 r30
+ * reveal.js 2.1 r31
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *