diff options
| author | Hakim El Hattab | 2012-04-04 00:59:35 -0400 |
|---|---|---|
| committer | Hakim El Hattab | 2012-04-04 00:59:35 -0400 |
| commit | f59e64a5711fcc90afe6c396f3ccd4e7a59afa9f (patch) | |
| tree | 345e67562226d5939abf0481c5a29e989b38f532 | |
| parent | d3e2a95d770b2ed1abe16c6aeeeae5c90dffa73c (diff) | |
better example of state usage
| -rw-r--r-- | css/main.css | 36 | ||||
| -rw-r--r-- | index.html | 40 |
2 files changed, 48 insertions, 28 deletions
diff --git a/css/main.css b/css/main.css index d2887bf..8376701 100644 --- 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 ); } @@ -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> |