add zoom transition
This commit is contained in:
		| @@ -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 | ||||||
|  *  |  *  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user