explain fragments in readme
This commit is contained in:
		
							
								
								
									
										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 | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user