diff options
author | Hakim El Hattab | 2012-10-13 10:28:34 -0400 |
---|---|---|
committer | Hakim El Hattab | 2012-10-13 10:28:34 -0400 |
commit | 6619bc62bdde24bf79769c5ed63ac931e127d7f6 (patch) | |
tree | 2dc80e5a0bdf7a3f96649f88f89f98144d82eeff | |
parent | bb47678b27b3e1600009e664da9b19bce92f4839 (diff) |
add zoom transition
-rw-r--r-- | README.md | 2 | ||||
-rw-r--r-- | css/reveal.css | 50 | ||||
-rw-r--r-- | index.html | 4 | ||||
-rw-r--r-- | js/reveal.js | 4 | ||||
-rw-r--r-- | js/reveal.min.js | 2 |
5 files changed, 57 insertions, 5 deletions
@@ -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 @@ -538,6 +538,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 *********************************************/ @@ -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 * |