diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 105 |
1 files changed, 49 insertions, 56 deletions
@@ -174,8 +174,12 @@ Reveal.initialize({ parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'" // Parallax background size - parallaxBackgroundSize: '' // CSS syntax, e.g. "2100px 900px" + parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" + // Amount to move parallax background (horizontal and vertical) on slide change + // Number, e.g. 100 + parallaxBackgroundHorizontal: '', + parallaxBackgroundVertical: '' }); ``` @@ -313,12 +317,12 @@ Reveal.configure({ When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option. -To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. +To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible. ```html <section> <img data-src="image.png"> - <iframe data-src="http://slides.com"></iframe> + <iframe data-src="http://hakim.se"></iframe> <video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> @@ -428,8 +432,8 @@ Slides are contained within a limited portion of the screen by default to allow <section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat"> <h2>This background image will be sized to 100px and repeated.</h2> </section> -<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm"> - <h2>Video. Multiple sources can be defined using a comma separated list.</h2> +<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop> + <h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided.</h2> </section> <section data-background-iframe="https://slides.com"> <h2>Embeds a web page as a background. Note that the page won't be interactive.</h2> @@ -441,7 +445,7 @@ Backgrounds transition using a fade animation by default. This can be changed to ### 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). +If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional). ```javascript Reveal.initialize({ @@ -452,8 +456,11 @@ Reveal.initialize({ // Parallax background size parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) - // This slide transition gives best results: - transition: 'slide' + // Amount of pixels to move the parallax background per slide step, + // a value of 0 disables movement along the given axis + // These are optional, if they aren't specified they'll be calculated automatically + parallaxBackgroundHorizontal: 200, + parallaxBackgroundVertical: 50 }); ``` @@ -475,6 +482,27 @@ The global presentation transition is set using the ```transition``` config valu </section> ``` +You can also use different in and out transitions for the same slide: + +```html +<section data-transition="slide"> + The train goes on … +</section> +<section data-transition="slide"> + and on … +</section> +<section data-transition="slide-in fade-out"> + and stops. +</section> +<section data-transition="fade-in slide-out"> + (Passengers entering and leaving) +</section> +<section data-transition="slide"> + And it starts again. +</section> +``` + + Note that this does not work with the page and cube transitions. @@ -508,7 +536,6 @@ The default fragment style is to start out invisible and fade in. This style can <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 current-visible">visible only once</p> <p class="fragment highlight-current-blue">blue only once</p> @@ -573,7 +600,16 @@ By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/ If you would like to display the page number of the current slide you can do so using the ```slideNumber``` configuration value. ```javascript +// Shows the slide number using default formatting Reveal.configure({ slideNumber: true }); + +// Slide number formatting can be configured using these variables: +// h: current slide's horizontal index +// v: current slide's vertical index +// c: current slide index (flattened) +// t: total number of slides (flattened) +Reveal.configure({ slideNumber: 'c / t' }); + ``` @@ -656,7 +692,7 @@ Reveal.initialize({ ## PDF Export -Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome). +Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home). Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300. 1. Open your presentation with `print-pdf` included anywhere in the query string. This triggers the default index HTML to load the PDF print stylesheet ([css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)). You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf). @@ -668,6 +704,8 @@ Here's an example of an exported presentation that's been uploaded to SlideShare  +Alternatively you can use the [decktape](https://github.com/astefanutti/decktape) project. + ## Theming The framework comes with a few different themes included: @@ -676,7 +714,7 @@ The framework comes with a few different themes included: - white: White background, black text, blue links - league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0) - beige: Beige background, dark text, brown links -- sky: Blue background, thin white text, blue links +- sky: Blue background, thin dark text, blue links - night: Black background, thick white text, orange links - serif: Cappuccino background, gray text, brown links - simple: White background, black text, blue links @@ -879,51 +917,6 @@ Reveal.initialize({ }); ``` -## Leap Motion -The Leap Motion plugin lets you utilize your [Leap Motion](https://www.leapmotion.com/) device to control basic navigation of your presentation. The gestures currently supported are: - -##### 1 to 2 fingers -Pointer — Point to anything on screen. Move your finger past the device to expand the pointer. - -##### 1 hand + 3 or more fingers (left/right/up/down) -Navigate through your slides. See config options to invert movements. - -##### 2 hands upwards -Toggle the overview mode. Do it a second time to exit the overview. - -#### Config Options -You can edit the following options: - -| Property | Default | Description -| ----------------- |:-----------------:| :------------- -| autoCenter | true | Center the pointer based on where you put your finger into the leap motions detection field. -| gestureDelay | 500 | How long to delay between gestures in milliseconds. -| naturalSwipe | true | Swipe as though you were touching a touch screen. Set to false to invert. -| pointerColor | #00aaff | The color of the pointer. -| pointerOpacity | 0.7 | The opacity of the pointer. -| pointerSize | 15 | The minimum height and width of the pointer. -| pointerTolerance | 120 | Bigger = slower pointer. - - -Example configuration: -```js -Reveal.initialize({ - - // other options... - - leap: { - naturalSwipe : false, // Invert swipe gestures - pointerOpacity : 0.5, // Set pointer opacity to 0.5 - pointerColor : '#d80000' // Red pointer - }, - - dependencies: [ - { src: 'plugin/leap/leap.js', async: true } - ] - -}); -``` - ## MathJax If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the [MathJax](http://www.mathjax.org/) library. To use it you'll need to include it as a reveal.js dependency, [find our more about dependencies here](#dependencies). |