projects / reveal.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d3e2a95)
better example of state usage 1.2.0 v1.2
authorHakim El Hattab <hakim.elhattab@gmail.com>
Wed, 4 Apr 2012 04:59:35 +0000 (00:59 -0400)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Wed, 4 Apr 2012 04:59:35 +0000 (00:59 -0400)
css/main.css patch | blob | history
index.html patch | blob | history

diff --git a/css/main.css b/css/main.css
index d2887bf53048de9ef335d0631b82656a98a34857..8376701b9091676d5ef6a59812f3935f1a9bb996 100644 (file)
--- 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
index e67b3e8fbbb5e181918860998ff15e90f00637d0..22b159a3cd62e8416981a0c40933eba4503df910 100644 (file)
--- 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 @@
                                        </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>
 
Assorted talks written in reveal.js.