diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 79 |
1 files changed, 52 insertions, 27 deletions
@@ -105,10 +105,9 @@ Reveal.initialize({ { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, // Zoom in and out with Alt+click - { src: 'plugin/zoom-js/zoom.js', condition: function() { return !!document.body.classList; } }, - // Speaker notes support - { src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }, - { src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }, + { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, + // Speaker notes + { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); ``` @@ -154,6 +153,16 @@ Reveal.addEventListener( 'somestate', function() { }, false ); ``` +### Ready event + +The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating. + +```javascript +Reveal.addEventListener( 'ready', function( event ) { + // event.currentSlide, event.indexh, event.indexv +} ); +``` + ### Slide change event An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. @@ -164,6 +173,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. @@ -177,14 +214,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> -``` ## PDF Export @@ -200,27 +229,23 @@ Here's an example of an exported presentation that's been uploaded to SlideShare  -## Speaker Notes - -If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another. - -To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view. - -It's also possible to write your notes with Markdown. To enable Markdown, add the ```data-markdown``` attribute to your note ```<aside>``` elements. - -You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`. -Once Node.js and the dependencies are installed, run the following command from the root directory: +## Speaker Notes - node plugin/speakernotes +reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ```?notes``` to presentation URL or press the 's' key on your keyboard to open the notes window. -By default, the slides will be served at [localhost:1947](http://localhost:1947). +Notes are written using the following markup structure: -You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html`. +```html +<section> + <h2>Some Slide</h2> -### Known Issues + <aside class="notes"> + Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). + </aside> +</section> +``` -- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions. ## Folder Structure - **css/** Core styles without which the project does not function |