From 29dbd29962c190d2e64f30e13e36c01c92934326 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 12 May 2013 17:25:06 -0400 Subject: typos --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 85e7e5c..96df870 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A framework for easily creating beautiful presentations using HTML. [Check out t reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere. -#### More reading:: +#### More reading: - [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer. - [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history. - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own! @@ -282,7 +282,7 @@ Note that this does not work with the page and cube transitions. ### Fragments -Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16 +Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: @@ -587,7 +587,7 @@ The core of reveal.js is very easy to install. You'll simply need to download a 1. Download a copy of reveal.js from -2. Unizp and replace the example contents in index.html with your own +2. Unzip and replace the example contents in index.html with your own 3. Open index.html in a browser to view it -- cgit v1.2.3 From 396d531770849dbcb37c00258fc33da3ba25d6c1 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 26 May 2013 15:16:26 -0300 Subject: typo (closes #471) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 96df870..43f7e50 100644 --- a/README.md +++ b/README.md @@ -583,7 +583,7 @@ The **basic setup** is for authoring presentations only. The **full setup** give ### Basic setup -The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.g +The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser. 1. Download a copy of reveal.js from -- cgit v1.2.3 From 0ce57f1f91d079b027dc250a2827b8ac4d93bd2d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 4 Jun 2013 21:14:13 +0200 Subject: update background test, documented slide backgrounds in readme (#453) --- README.md | 46 ++++++++++++++++++++++++++++++++++------------ js/reveal.min.js | 2 +- test/background.html | 4 ++-- 3 files changed, 37 insertions(+), 15 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 85e7e5c..a496f5d 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 a321063..aa2cf31 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 9c8d3fe..ccd374b 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"
-- cgit v1.2.3