update order of default slides
This commit is contained in:
Hakim El Hattab
parent
d84233df98
commit
3126db0a46
1 changed files with 137 additions and 136 deletions
273
index.html
273
index.html
|
|
@ -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 <head> using a <link>.
|
||||||
|
</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><section data-background="image.png"></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;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></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><head></code> using a <code><link></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><section data-background="image.png"></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;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></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">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue