add zoom transition
This commit is contained in:
parent
bb47678b27
commit
6619bc62bd
5 changed files with 57 additions and 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
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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
2
js/reveal.min.js
vendored
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* reveal.js 2.1 r30
|
||||
* reveal.js 2.1 r31
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* MIT licensed
|
||||
*
|
||||
|
|
Loading…
Reference in a new issue