Commit f59e64a5 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

better example of state usage

parent d3e2a95d
...@@ -898,23 +898,29 @@ html { ...@@ -898,23 +898,29 @@ html {
/********************************************* /*********************************************
* STATES * DEFAULT STATES
*********************************************/ *********************************************/
.blurred #reveal * { .state-background {
color: rgba( 255, 255, 255, 0 ); position: absolute;
text-shadow: 0px 0px 5px #fff; width: 100%;
height: 100%;
-webkit-transition: color .8s ease, background: rgba( 0, 0, 0, 0 );
text-shadow .8s ease;
-moz-transition: color .8s ease, -webkit-transition: background 800ms ease;
text-shadow .8s ease; -moz-transition: background 800ms ease;
-ms-transition: color .8s ease, -ms-transition: background 800ms ease;
text-shadow .8s ease; -o-transition: background 800ms ease;
-o-transition: color .8s ease, transition: background 800ms ease;
text-shadow .8s ease; }
transition: color .8s ease, .alert .state-background {
text-shadow .8s ease; 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 @@ ...@@ -20,6 +20,9 @@
<body> <body>
<div id="reveal"> <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 --> <!-- Any section element inside of this container is displayed as a slide -->
<div class="slides"> <div class="slides">
...@@ -114,13 +117,30 @@ ...@@ -114,13 +117,30 @@
</ol> </ol>
</section> </section>
<section data-state="blurred"> <section>
<h2>Global State</h2> <section data-state="alert">
<p> <h2>Global State</h2>
If you set <code>data-state="something"</code> on a slide, <code>"something"</code> <p>
will be added as a class to the document element when the slide is open. Like the <code>"blur"</code> Set <code>data-state="something"</code> on a slide and <code>"something"</code>
effect on this slide. will be added as a class to the document element when the slide is open. This let's you
</p> 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>
<section> <section>
...@@ -253,12 +273,6 @@ ...@@ -253,12 +273,6 @@
transition: query.transition || 'default' // default/cube/page/concave/linear(2d) 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(); hljs.initHighlightingOnLoad();
</script> </script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment