add zoom transition
This commit is contained in:
parent
bb47678b27
commit
6619bc62bd
|
@ -85,7 +85,7 @@ Reveal.initialize({
|
||||||
rollingLinks: true,
|
rollingLinks: true,
|
||||||
|
|
||||||
// Transition style
|
// 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
|
* LINEAR TRANSITION
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -151,7 +151,9 @@
|
||||||
<a href="?transition=cube#/transitions">Cube</a> -
|
<a href="?transition=cube#/transitions">Cube</a> -
|
||||||
<a href="?transition=page#/transitions">Page</a> -
|
<a href="?transition=page#/transitions">Page</a> -
|
||||||
<a href="?transition=concave#/transitions">Concave</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=linear#/transitions">Linear</a> -
|
||||||
|
<a href="?transition=none#/transitions">None</a> -
|
||||||
<a href="?#/transitions">Default</a>
|
<a href="?#/transitions">Default</a>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
@ -335,7 +337,7 @@ function linkify( selector ) {
|
||||||
history: true,
|
history: true,
|
||||||
|
|
||||||
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
|
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
|
// Optional libraries used to extend on reveal.js
|
||||||
dependencies: [
|
dependencies: [
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* reveal.js 2.1 r30
|
* reveal.js 2.1 r31
|
||||||
* http://lab.hakim.se/reveal-js
|
* http://lab.hakim.se/reveal-js
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
*
|
*
|
||||||
|
@ -46,7 +46,7 @@ var Reveal = (function(){
|
||||||
theme: null,
|
theme: null,
|
||||||
|
|
||||||
// Transition style
|
// Transition style
|
||||||
transition: 'default', // default/cube/page/concave/linear(2d),
|
transition: 'default', // default/cube/page/concave/zoom/linear/none
|
||||||
|
|
||||||
// Script dependencies to load
|
// Script dependencies to load
|
||||||
dependencies: []
|
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
|
* http://lab.hakim.se/reveal-js
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue
Block a user