Strona główna Odkrywaj Pomoc
Zaloguj się
OSInet
/
assets__dgtd-13k15
2
0
Forkuj 0
Pliki Oczekujące zmiany 0
Przeglądaj źródła

better example of state usage

Hakim El Hattab 12 lat temu
rodzic
d3e2a95d77
commit
f59e64a571
2 zmienionych plików z 48 dodań i 28 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 21 15
      css/main.css
  2. 27 13
      index.html

+ 21 - 15
css/main.css
Wyświetl plik 

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

+ 27 - 13
index.html
Wyświetl plik 

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