diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 119 |
1 files changed, 72 insertions, 47 deletions
@@ -54,19 +54,39 @@ This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Iri You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file. The ```data-charset``` attribute is optional and specifies which charset to use when loading the external file. +When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). + ```html -<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:" data-charset="iso-8859-15"></section> +<section data-markdown="example.md" + data-separator="^\n\n\n" + data-separator-vertical="^\n\n" + data-separator-notes="^Note:" + data-charset="iso-8859-15"> +</section> ``` #### Element Attributes -Special syntax is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things. +Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things. + +```html +<section data-markdown> + <script type="text/template"> + - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> + - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> + </script> +</section> +``` + +#### Slide Attributes + +Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown. ```html <section data-markdown> <script type="text/template"> - - Item 1 {_class="fragment" data-fragment-index="2"} - - Item 2 {_class="fragment" data-fragment-index="1"} + <!-- .slide: data-background="#ff0000" --> + Markdown content </script> </section> ``` @@ -85,6 +105,9 @@ Reveal.initialize({ // Display a presentation progress bar progress: true, + // Display the page number of the current slide + slideNumber: false, + // Push each slide change to the browser history history: false, @@ -137,7 +160,7 @@ Reveal.initialize({ transitionSpeed: 'default', // default/fast/slow // Transition style for full page slide backgrounds - backgroundTransition: 'default', // default/linear/none + backgroundTransition: 'default', // default/none/slide/concave/convex/zoom // Number of slides away from the current that are visible viewDistance: 3, @@ -243,15 +266,20 @@ Reveal.configure({ autoSlide: 5000 }); ``` +When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config. -When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Sliding is also paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config. - -You can also override the slide duration for individual slides by using the ```data-autoslide``` attribute on individual sections: +You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute: ```html -<section data-autoslide="10000">This will remain on screen for 10 seconds</section> +<section data-autoslide="2000"> + <p>After 2 seconds the first fragment will be shown.</p> + <p class="fragment" data-autoslide="10000">After 10 seconds the next fragment will be shown.</p> + <p class="fragment">Now, the fragment is displayed for 2 seconds before the next slide is shown.</p> +</section> ``` +Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired. + ### Keyboard Bindings @@ -285,6 +313,7 @@ Reveal.prevFragment(); Reveal.nextFragment(); Reveal.toggleOverview(); Reveal.togglePause(); +Reveal.toggleAutoSlide(); // Retrieves the previous and current slide elements Reveal.getPreviousSlide(); @@ -297,6 +326,7 @@ Reveal.isFirstSlide(); Reveal.isLastSlide(); Reveal.isOverview(); Reveal.isPaused(); +Reveal.isAutoSliding(); ``` ### Ready Event @@ -352,6 +382,7 @@ Slides are contained within a limited portion of the screen by default to allow Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition. + ### Parallax Background If you want to use a parallax scrolling background, set the two following config properties when initializing reveal.js (the third one is optional). @@ -371,7 +402,7 @@ Reveal.initialize({ }); ``` -Make sure that the background size is much bigger than screen size to allow for some scrolling. +Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). @@ -423,6 +454,8 @@ The default fragment style is to start out invisible and fade in. This style can <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 current-visible">visible only once</p> + <p class="fragment highlight-current-blue">blue only once</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> @@ -480,6 +513,13 @@ By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/ </section> ``` +### Slide number +If you would like to display the page number of the current slide you can do so using the ```slideNumber``` configuration value. + +```javascript +Reveal.configure({ slideNumber: true }); +``` + ### Overview mode @@ -566,6 +606,8 @@ reveal.js comes with a speaker notes plugin which can be used to present per-sli Notes are defined by appending an ```<aside>``` element to a slide as seen below. You can add the ```data-markdown``` attribute to the aside element if you prefer writing notes using Markdown. +When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). + ```html <section> <h2>Some Slide</h2> @@ -579,7 +621,7 @@ Notes are defined by appending an ```<aside>``` element to a slide as seen below If you're using the external Markdown plugin, you can add notes with the help of a special delimiter: ```html -<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"></section> +<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:"></section> # Title ## Sub-title @@ -648,7 +690,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true }, { src: 'plugin/multiplex/master.js', async: true }, // and if you want speaker notes @@ -676,7 +718,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true }, { src: 'plugin/multiplex/client.js', async: true } // other dependencies... @@ -714,7 +756,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true }, { src: 'plugin/multiplex/client.js', async: true } // other dependencies... @@ -737,7 +779,7 @@ Reveal.initialize({ // Don't forget to add the dependencies dependencies: [ - { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true }, + { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', async: true }, { src: 'plugin/multiplex/master.js', async: true }, { src: 'plugin/multiplex/client.js', async: true } @@ -836,35 +878,35 @@ The core of reveal.js is very easy to install. You'll simply need to download a ### Full setup -Some reveal.js features, like external markdown, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code. +Some reveal.js features, like external markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code. 1. Install [Node.js](http://nodejs.org/) 2. Install [Grunt](http://gruntjs.com/getting-started#installing-the-cli) 4. Clone the reveal.js repository -```sh -$ git clone https://github.com/hakimel/reveal.js.git -``` + ```sh + $ git clone https://github.com/hakimel/reveal.js.git + ``` 5. Navigate to the reveal.js folder -```sh -$ cd reveal.js -``` + ```sh + $ cd reveal.js + ``` 6. Install dependencies -```sh -$ npm install -``` + ```sh + $ npm install + ``` 7. Serve the presentation and monitor source files for changes -```sh -$ grunt serve -``` + ```sh + $ grunt serve + ``` 8. Open <http://localhost:8000> to view your presentation -You can change the port by using `grunt serve --port 8001`. + You can change the port by using `grunt serve --port 8001`. ### Folder Structure @@ -874,25 +916,8 @@ You can change the port by using `grunt serve --port 8001`. - **lib/** All other third party assets (JavaScript, CSS, fonts) -### Contributing - -Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**. If you are reporting a bug make sure to include information about which browser and operating system you are using as well as the necessary steps to reproduce the issue. - -If you have personal support questions use [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js). - - -#### Pull requests - -- Should follow the coding style of the file you work in, most importantly: - - Tabs to indent - - Single-quoted strings -- Should be made towards the **dev branch** -- Should be submitted from a feature/topic branch (not your master) -- Should not include the minified **reveal.min.js** file - - ## License MIT licensed -Copyright (C) 2013 Hakim El Hattab, http://hakim.se +Copyright (C) 2014 Hakim El Hattab, http://hakim.se |