Bläddra i källkod

add zoom transition

Hakim El Hattab 11 år sedan
förälder
incheckning
6619bc62bd
5 ändrade filer med 57 tillägg och 5 borttagningar
  1. 1 1
      README.md
  2. 50 0
      css/reveal.css
  3. 3 1
      index.html
  4. 2 2
      js/reveal.js
  5. 1 1
      js/reveal.min.js

+ 1 - 1
README.md

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

+ 50 - 0
css/reveal.css

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

+ 3 - 1
index.html

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

+ 2 - 2
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: []

+ 1 - 1
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
  *