Permalink
Browse files

better example of state usage

  • Loading branch information...
1 parent d3e2a95 commit f59e64a5711fcc90afe6c396f3ccd4e7a59afa9f @hakimel committed Apr 4, 2012
Showing with 48 additions and 28 deletions.
  1. +21 −15 css/main.css
  2. +27 −13 index.html
View
@@ -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 );
}
View
@@ -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 @@ <h3 class="inverted">A CSS 3D Slideshow</h3>
</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>

0 comments on commit f59e64a

Please sign in to comment.