diff --git a/README.md b/README.md index 85e7e5c0..a496f5d4 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,9 @@ Reveal.initialize({ // Transition speed transitionSpeed: 'default', // default/fast/slow + // Transition style for full page backgrounds + backgroundTransition: 'default' // default/linear + }); ``` @@ -211,18 +214,6 @@ Reveal.getCurrentSlide(); Reveal.getIndices(); // { h: 0, v: 0 } } ``` -### States - -If you set ``data-state="somestate"`` on a slide ``
``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. - -Furthermore you can also listen to these changes in state via JavaScript: - -```javascript -Reveal.addEventListener( 'somestate', function() { - // TODO: Sprinkle magic -}, false ); -``` - ### Ready event The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating. @@ -245,6 +236,37 @@ Reveal.addEventListener( 'slidechanged', function( event ) { } ); ``` +### States + +If you set ``data-state="somestate"`` on a slide ``
``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. + +Furthermore you can also listen to these changes in state via JavaScript: + +```javascript +Reveal.addEventListener( 'somestate', function() { + // TODO: Sprinkle magic +}, false ); +``` + +### Slide backgrounds + +Slides are contained withing a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```
``` elements. Below are a few examples. + +```html +
+

All CSS color formats are supported, like rgba() or hsl().

+
+
+

This slide will have a full-size background image.

+
+
+

This background image will be sized to 100px and repeated.

+
+``` + +Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'linear'``` to the ```Reveal.initialize()``` call. + + ### Internal links It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```
```): diff --git a/js/reveal.min.js b/js/reveal.min.js index a3210634..aa2cf311 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.5.0 (2013-06-04, 20:24) + * reveal.js 2.5.0 (2013-06-04, 20:58) * http://lab.hakim.se/reveal-js * MIT licensed * diff --git a/test/background.html b/test/background.html index 9c8d3fe1..ccd374b6 100644 --- a/test/background.html +++ b/test/background.html @@ -50,13 +50,13 @@
-
+

Background image

Background image

- data-background-size="100px" data-background-repeat="repeat" +
data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"