better example of state usage

hakimel · Apr 4, 2012 · f59e64a · f59e64a
1 parent d3e2a95
commit f59e64a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 28 deletions.
diff --git a/css/main.css b/css/main.css
@@ -898,23 +898,29 @@ html {
 
 
 /*********************************************
- * STATES
+ * DEFAULT STATES
  *********************************************/
 
-.blurred #reveal * {
-	color: rgba( 255, 255, 255, 0 );
-	text-shadow: 0px 0px 5px #fff;
-
-	-webkit-transition: color .8s ease,
-						text-shadow .8s ease;
-	   -moz-transition: color .8s ease,
-	   					text-shadow .8s ease;
-	    -ms-transition: color .8s ease,
-	    				text-shadow .8s ease;
-	     -o-transition: color .8s ease,
-	     				text-shadow .8s ease;
-	        transition: color .8s ease,
-	        			text-shadow .8s ease;
+.state-background {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: rgba( 0, 0, 0, 0 );
+
+	-webkit-transition: background 800ms ease;
+	   -moz-transition: background 800ms ease;
+	    -ms-transition: background 800ms ease;
+	     -o-transition: background 800ms ease;
+	        transition: background 800ms ease;
+}
+.alert .state-background {
+	background: rgba( 200, 50, 30, 0.6 );
+}
+.soothe .state-background {
+	background: rgba( 50, 200, 90, 0.4 );
+}
+.blackout .state-background {
+	background: rgba( 0, 0, 0, 0.6 );
 }
 
 

diff --git a/index.html b/index.html
@@ -20,6 +20,9 @@
 	<body>
 
 		<div id="reveal">
+
+			<!-- Used to fade in a background when a specific slide state is reached -->
+			<div class="state-background"></div>
 
 			<!-- Any section element inside of this container is displayed as a slide -->
 			<div class="slides">
@@ -114,13 +117,30 @@ <h2>Fantastic Ordered List</h2>
 					</ol>
 				</section>
 
-				<section data-state="blurred">
-					<h2>Global State</h2>
-					<p>
-						If you set <code>data-state="something"</code> on a slide, <code>"something"</code>
-						will be added as a class to the document element when the slide is open. Like the <code>"blur"</code> 
-						effect on this slide.
-					</p>
+				<section>
+					<section data-state="alert">
+						<h2>Global State</h2>
+						<p>
+							Set <code>data-state="something"</code> on a slide and <code>"something"</code>
+							will be added as a class to the document element when the slide is open. This let's you
+							apply broader style changes, like switching the background.
+						</p>
+						<a href="#/7/1" class="image">
+							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
+						</a>
+					</section>
+					<section data-state="blackout">
+						<h2>"blackout"</h2>
+						<a href="#/7/2" class="image">
+							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
+						</a>
+					</section>
+					<section data-state="soothe">
+						<h2>"soothe"</h2>
+						<a href="#/7/0" class="image">
+							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" style="-webkit-transform: rotate(180deg);">
+						</a>
+					</section>
 				</section>
 
 				<section>
@@ -253,12 +273,6 @@ <h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
 				transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
 			});
 
-			// Example of binding an event to a state. This listener will trigger
-			// when the slide with 'data-state="blurred"' is opened.
-			document.addEventListener( 'blurred', function() {
-
-			}, false );
-
 			hljs.initHighlightingOnLoad();
 		</script>