update order of default slides

This commit is contained in:
Hakim El Hattab 2014-11-05 12:54:00 +01:00
parent d84233df98
commit 3126db0a46

View File

@ -102,14 +102,148 @@
</section> </section>
<section> <section>
<h2>Mobile Support</h2> <h2>Touch Optimized</h2>
<p> <p>
Presentations work on touch devices such as phones and tablets. Simply swipe through your slides. Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
</p>
</section>
<section data-markdown>
<script type="text/template">
## Markdown support
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
```
<section data-markdown>
## Markdown support
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
</section>
```
</script>
</section>
<section>
<section id="fragments">
<h2>Fragments</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<ol>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
<aside class="notes">
This slide has fragments which are also stepped through in the notes window.
</aside>
</section>
<section>
<h2>Fragment Styles</h2>
<p>There's a few styles of fragments, like:</p>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment current-visible">current-visible</p>
<p class="fragment highlight-current-blue">highlight-current-blue</p>
</section>
</section>
<section id="transitions">
<h2>Transition Styles</h2>
<p>
You can select from different transitions, like: <br>
<a href="?transition=none#/transitions">None</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=slide#/transitions">Slide</a> -
<a href="?transition=convex#/transitions">Convex</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a>
</p>
</section>
<section id="themes">
<h2>Themes</h2>
<p>
Reveal.js comes with a few themes built in: <br>
<a href="?#/themes">Default</a> -
<a href="?theme=sky#/themes">Sky</a> -
<a href="?theme=beige#/themes">Beige</a> -
<a href="?theme=simple#/themes">Simple</a> -
<a href="?theme=serif#/themes">Serif</a> -
<a href="?theme=night#/themes">Night</a> <br>
<a href="?theme=moon#/themes">Moon</a> -
<a href="?theme=solarized#/themes">Solarized</a>
</p>
<p>
<small>
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the &lt;head&gt; using a &lt;link&gt;.
</small>
</p> </p>
</section> </section>
<section> <section>
<h2>Marvelous Unordered List</h2> <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="#007777">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
<h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Tile Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
</section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
Different background transitions are available via the <code>backgroundTransition</code> option. This one's called "zoom".
</p>
</section>
<section data-transition="slide" data-background="#8c4738" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
You can override background transitions per slide by using <code>data-background-transition="zoom"</code>.
</p>
</section>
<section>
<h2>Marvelous List</h2>
<ul> <ul>
<li>No order here</li> <li>No order here</li>
<li>Or here</li> <li>Or here</li>
@ -157,111 +291,6 @@
</table> </table>
</section> </section>
<section data-markdown>
<script type="text/template">
## Markdown support
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
```
<section data-markdown>
## Markdown support
For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>
```
</script>
</section>
<section id="transitions">
<h2>Transition Styles</h2>
<p>
You can select from different transitions, like: <br>
<a href="?#/transitions">Default</a> -
<a href="?transition=none#/transitions">None</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=slide#/transitions">Slide</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a>
</p>
</section>
<section id="themes">
<h2>Themes</h2>
<p>
Reveal.js comes with a few themes built in: <br>
<a href="?#/themes">Default</a> -
<a href="?theme=sky#/themes">Sky</a> -
<a href="?theme=beige#/themes">Beige</a> -
<a href="?theme=simple#/themes">Simple</a> -
<a href="?theme=serif#/themes">Serif</a> -
<a href="?theme=night#/themes">Night</a> <br>
<a href="?theme=moon#/themes">Moon</a> -
<a href="?theme=solarized#/themes">Solarized</a>
</p>
<p>
<small>
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
</small>
</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 background.
</p>
</section>
<section data-state="customevent">
<h2>Custom 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="#007777">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
<h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Repeated Image Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
</section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
Different background transitions are available via the <code>backgroundTransition</code> option. This one's called "zoom".
</p>
</section>
<section data-transition="slide" data-background="#8c4738" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
</p>
</section>
<section> <section>
<h2>Clever Quotes</h2> <h2>Clever Quotes</h2>
<p> <p>
@ -303,34 +332,6 @@ function linkify( selector ) {
</p> </p>
</section> </section>
<section>
<section id="fragments">
<h2>Fragmented Views</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<ol>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
<aside class="notes">
This slide has fragments which are also stepped through in the notes window.
</aside>
</section>
<section>
<h2>Fragment Styles</h2>
<p>There's a few styles of fragments, like:</p>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment current-visible">current-visible</p>
<p class="fragment highlight-current-blue">highlight-current-blue</p>
</section>
</section>
<section> <section>
<h2>Spectacular image!</h2> <h2>Spectacular image!</h2>
<a href="http://lab.hakim.se/meny/" target="_blank"> <a href="http://lab.hakim.se/meny/" target="_blank">