diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 55 |
1 files changed, 52 insertions, 3 deletions
@@ -71,6 +71,9 @@ Reveal.initialize({ // Enable the slide overview mode overview: true, + // Vertical centering of slides + center: true, + // Loop the presentation loop: false, @@ -80,7 +83,7 @@ Reveal.initialize({ autoSlide: 0, // Enable slide navigation via mouse wheel - mouseWheel: true, + mouseWheel: false, // Apply a 3D roll to links on hover rollingLinks: true, @@ -90,6 +93,8 @@ Reveal.initialize({ }); ``` +Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`. + ### Dependencies Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: @@ -99,15 +104,22 @@ Reveal.initialize({ dependencies: [ // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, + // Interpret Markdown in <section> elements { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, + // Syntax highlight for <code> elements { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + // Zoom in and out with Alt+click { 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; } } + { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }, + + // Remote control your reveal.js presentation using a touch device + { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); ``` @@ -169,6 +181,8 @@ Reveal.addEventListener( 'ready', function( 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. +Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. + ```javascript Reveal.addEventListener( 'slidechanged', function( event ) { // event.previousSlide, event.currentSlide, event.indexh, event.indexv @@ -183,6 +197,19 @@ It's easy to link between slides. The first example below targets the index of a <a href="#/2/2">Link</a> <a href="#/some-slide">Link</a> ``` + +You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide. + +```html +<a href="#" class="navigate-left"> +<a href="#" class="navigate-right"> +<a href="#" class="navigate-up"> +<a href="#" class="navigate-down"> +<a href="#" class="navigate-prev"> <!-- Previous vertical slide or horizontal slide --> +<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide --> +``` + + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. @@ -203,6 +230,21 @@ The default fragment style is to start out invisible and fade in. This style can </section> ``` +Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second. + +``` +<section> + <span class="fragment fade-out"> + <span class="fragment fade-out">I'll fade in, then out</span> + </span> +</section> +``` + +### Overview mode + +Press "Esc" key to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, +as if you were at 1,000 feet above your presentation. + ### Fragment events When a slide fragment is either shown or hidden reveal.js will dispatch an event. @@ -264,12 +306,19 @@ Then: 3. Run ```node plugin/notes-server``` -## Folder Structure +## Development Environment + +reveal.js is built using the task-based command line build tool [grunt.js](http://gruntjs.com) ([installation instructions](https://github.com/gruntjs/grunt#installing-grunt)). With Node.js and grunt.js installed, you need to start by running ```npm install``` in the reveal.js root. When the dependencies have been installed you should run ```grunt watch``` to start monitoring files for changes. + +If you want to customise reveal.js without running grunt.js you can alter the HTML to point to the uncompressed source files (css/reveal.css & js/reveal.js). + +### Folder Structure - **css/** Core styles without which the project does not function - **js/** Like above but for JavaScript - **plugin/** Components that have been developed as extensions to reveal.js - **lib/** All other third party assets (JavaScript, CSS, fonts) + ## License MIT licensed |