add zoom transition

This commit is contained in:
Hakim El Hattab 2012-10-13 10:28:34 -04:00
parent bb47678b27
commit 6619bc62bd
5 changed files with 57 additions and 5 deletions

View File

@ -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
});
```

View 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
*********************************************/

View File

@ -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: [

View 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: []

2
js/reveal.min.js vendored
View File

@ -1,5 +1,5 @@
/*!
* reveal.js 2.1 r30
* reveal.js 2.1 r31
* http://lab.hakim.se/reveal-js
* MIT licensed
*