|
@@ -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 -->
|
|
@@ -184,27 +180,6 @@
|
|
|
</p>
|
|
|
</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>
|
|
@@ -247,6 +222,27 @@ Reveal.addEventListener( 'customevent', function() {
|
|
|
<pre><code style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
|
|
</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>
|
|
@@ -308,27 +304,6 @@ Reveal.addEventListener( 'customevent', function() {
|
|
|
</blockquote>
|
|
|
</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>
|
|
@@ -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>
|
|
@@ -353,6 +331,27 @@ function linkify( selector ) {
|
|
|
</script>
|
|
|
</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>
|
|
@@ -360,6 +359,15 @@ function linkify( selector ) {
|
|
|
</p>
|
|
|
</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>
|