diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 108 |
1 files changed, 58 insertions, 50 deletions
@@ -53,10 +53,6 @@ <p> reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it. </p> - - <aside class="notes"> - Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). - </aside> </section> <!-- Example of nested vertical slides --> @@ -185,27 +181,6 @@ </section> <section> - <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 lets you - apply broader style changes, like switching the page background. - </p> - </section> - - <section data-state="customevent"> - <h2>State Events</h2> - <p> - Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. - </p> - <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;"> -Reveal.addEventListener( 'customevent', function() { - console.log( '"customevent" has fired' ); -} ); - </code></pre> - </section> - - <section> <section data-background="#dddddd"> <h2>Slide Backgrounds</h2> <p> @@ -248,6 +223,27 @@ Reveal.addEventListener( 'customevent', function() { </section> <section> + <h2>Pretty Code</h2> + <pre><code data-trim contenteditable> +function linkify( selector ) { + if( supports3DTransforms ) { + + var nodes = document.querySelectorAll( selector ); + + for( var i = 0, len = nodes.length; i < len; i++ ) { + var node = nodes[i]; + + if( !node.className ) { + node.className += ' roll'; + } + } + } +} + </code></pre> + <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> + </section> + + <section> <h2>Marvelous List</h2> <ul> <li>No order here</li> @@ -309,27 +305,6 @@ Reveal.addEventListener( 'customevent', function() { </section> <section> - <h2>Pretty Code</h2> - <pre><code data-trim contenteditable> -function linkify( selector ) { - if( supports3DTransforms ) { - - var nodes = document.querySelectorAll( selector ); - - for( var i = 0, len = nodes.length; i < len; i++ ) { - var node = nodes[i]; - - if( !node.className ) { - node.className += ' roll'; - } - } - } -} - </code></pre> - <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> - </section> - - <section> <h2>Intergalactic Interconnections</h2> <p> You can link between slides internally, @@ -338,10 +313,13 @@ function linkify( selector ) { </section> <section> - <h2>Spectacular image!</h2> - <a href="http://lab.hakim.se/meny/" target="_blank"> - <img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> - </a> + <h2>Speaker View</h2> + <p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p> + <p>Press the <em>S</em> key to try it out.</p> + + <aside class="notes"> + Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). + </aside> </section> <section> @@ -354,6 +332,27 @@ function linkify( selector ) { </section> <section> + <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 lets you + apply broader style changes, like switching the page background. + </p> + </section> + + <section data-state="customevent"> + <h2>State Events</h2> + <p> + Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. + </p> + <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;"> +Reveal.addEventListener( 'customevent', function() { + console.log( '"customevent" has fired' ); +} ); + </code></pre> + </section> + + <section> <h2>Take a Moment</h2> <p> Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. @@ -361,6 +360,15 @@ function linkify( selector ) { </section> <section> + <h2>Much more</h2> + <ul> + <li>Right-to-left support</li> + <li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li> + <li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li> + </ul> + </section> + + <section> <h2>Stellar Links</h2> <ul> <li><a href="http://slid.es">Try the online editor</a></li> |