From 2b5c06c4ef3002381c1007160f8ab60b4b2bd641 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Smolin=CC=81ski?= Date: Tue, 10 Sep 2013 21:23:10 +0200 Subject: Added parallax scrolling background --- README.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) (limited to 'README.md') diff --git a/README.md b/README.md index fd4254b..55c8a74 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,16 @@ Reveal.initialize({ // Transition style for full page backgrounds backgroundTransition: 'default' // default/linear/none + + // Parallax background image + parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')" + + // Parallax background size + parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" + + // Number of slides away from the current that are visible + viewDistance: 3, + }); ``` @@ -291,6 +301,30 @@ 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 the 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: '', // CSS syntax, e.g. "url('a.jpg')" + + // Parallax background size + parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" - 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. + +The image used in the background is made by Eli Mergel and is published under Creative Commons license on [Flickr](https://secure.flickr.com/photos/sp1te/3436256585/sizes/o/in/pool-856427@N25/). + + ### 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: -- cgit v1.2.3