better example of state usage
This commit is contained in:
parent
d3e2a95d77
commit
f59e64a571
34
css/main.css
34
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;
|
||||
.state-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba( 0, 0, 0, 0 );
|
||||
|
||||
-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;
|
||||
-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 );
|
||||
}
|
||||
|
||||
|
||||
|
40
index.html
40
index.html
@ -21,6 +21,9 @@
|
||||
|
||||
<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">
|
||||
<section>
|
||||
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user