diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 43 |
1 files changed, 39 insertions, 4 deletions
@@ -97,6 +97,9 @@ Reveal.initialize({ // by using a data-autoslide attribute on your slides autoSlide: 0, + // Stop auto-sliding after user input + autoSlideStoppable: true, + // Enable slide navigation via mouse wheel mouseWheel: false, @@ -109,6 +112,16 @@ Reveal.initialize({ // Transition style for full page backgrounds backgroundTransition: 'default' // default/linear/none + // Parallax background image + 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" + + // Number of slides away from the current that are visible + viewDistance: 3, + + }); ``` @@ -291,6 +304,28 @@ 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). + +```javascript +Reveal.initialize({ + + // Parallax background image + 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" - currently only pixels are supported (don't use % or auto) + + // This slide transition gives best results: + transition: linear + +}); +``` + +Make sure that the background size is much bigger than screen size to allow for some scrolling. + + ### Slide Transitions The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute: @@ -757,22 +792,22 @@ Some reveal.js features, like external markdown, require that presentations run 2. Install [Grunt](http://gruntjs.com/getting-started#installing-the-cli) 4. Clone the reveal.js repository -``` +```sh $ git clone git@github.com:hakimel/reveal.js.git ``` 5. Navigate to the reveal.js folder -``` +```sh $ cd reveal.js ``` 6. Install dependencies -``` +```sh $ npm install ``` 7. Serve the presentation and monitor source files for changes -``` +```sh $ grunt serve ``` |