Browse Source

content now re-renders after alt+click zoom (closes #195)

Hakim El Hattab 11 years ago
parent
commit
e87d689231
3 changed files with 42 additions and 3 deletions
  1. 32 0
      css/reveal.css
  2. 3 3
      index.html
  3. 7 0
      plugin/zoom-js/zoom.js

+ 32 - 0
css/reveal.css

@@ -1150,3 +1150,35 @@ body {
 }
 }
 
 
 
 
+/*********************************************
+ * ZOOM PLUGIN
+ *********************************************/
+
+.zoomed .reveal *,
+.zoomed .reveal *:before,
+.zoomed .reveal *:after {
+	-webkit-transform: initial !important;
+	   -moz-transform: initial !important;
+	    -ms-transform: initial !important;
+	        transform: initial !important;
+
+	-webkit-backface-visibility: initial !important;
+	   -moz-backface-visibility: initial !important;
+	    -ms-backface-visibility: initial !important;
+	        backface-visibility: initial !important;
+}
+
+.zoomed .reveal .progress,
+.zoomed .reveal .controls {
+	opacity: 0;
+}
+
+.zoomed .reveal .roll span {
+	background: none;
+}
+
+.zoomed .reveal .roll span:after {
+	visibility: hidden;
+}
+
+

+ 3 - 3
index.html

@@ -38,6 +38,9 @@
 				<section>
 				<section>
 					<h1>Reveal.js</h1>
 					<h1>Reveal.js</h1>
 					<h3>HTML Presentations Made Easy</h3>
 					<h3>HTML Presentations Made Easy</h3>
+					<p>
+						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
+					</p>
 				</section>
 				</section>
 
 
 				<section>
 				<section>
@@ -46,9 +49,6 @@
 						reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
 						reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
 						support for CSS 3D transforms to see it in its full glory.
 						support for CSS 3D transforms to see it in its full glory.
 					</p>
 					</p>
-					<p>
-						<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
-					</p>
 
 
 					<aside class="notes">
 					<aside class="notes">
 						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
 						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

+ 7 - 0
plugin/zoom-js/zoom.js

@@ -111,6 +111,13 @@ var zoom = (function(){
 		}
 		}
 
 
 		level = scale;
 		level = scale;
+
+		if( level !== 1 && document.documentElement.classList ) {
+			document.documentElement.classList.add( 'zoomed' );
+		}
+		else {
+			document.documentElement.classList.remove( 'zoomed' );
+		}
 	}
 	}
 
 
 	/**
 	/**