explain fragments in readme
authorHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 20 Oct 2012 18:20:08 +0000 (15:20 -0300)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 20 Oct 2012 18:20:08 +0000 (15:20 -0300)
README.md

index 533148c0ed9e4dae1993cac60e3ad9db5755521c..1e83ccb4b6285d7dcf4318dcb4cf0564ca1b5925 100644 (file)
--- a/README.md
+++ b/README.md
@@ -174,6 +174,34 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
 } );
 ```
 
+### Internal links
+
+It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
+
+```html
+<a href="#/2/2">Link</a>
+<a href="#/some-slide">Link</a>
+```
+### Fullscreen mode
+Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
+
+### Fragments
+Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
+
+The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
+
+```html
+<section>
+       <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 highlight-green">highlight-green</p>
+       <p class="fragment highlight-blue">highlight-blue</p>
+</section>
+```
+
 ### Fragment events
 
 When a slide fragment is either shown or hidden reveal.js will dispatch an event.
@@ -187,16 +215,6 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 } );
 ```
 
-### Internal links
-
-It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
-
-```html
-<a href="#/2/2">Link</a>
-<a href="#/some-slide">Link</a>
-```
-### Fullscreen mode
-Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
 
 ## PDF Export