explain fragments in readme
This commit is contained in:
parent
da40cf2172
commit
c13390354b
38
README.md
38
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
|
### Fragment events
|
||||||
|
|
||||||
When a slide fragment is either shown or hidden reveal.js will dispatch an event.
|
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
|
## PDF Export
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue