phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

readme update

Browse Source
This commit is contained in:
Hakim El Hattab 2013-06-18 10:09:19 -03:00
parent ed81faa467
commit 2dce8db491
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
README.md
View File

@ -206,12 +206,19 @@ Reveal.next();
Reveal.prevFragment(); Reveal.prevFragment();
Reveal.nextFragment(); Reveal.nextFragment();
Reveal.toggleOverview(); Reveal.toggleOverview();
Reveal.togglePause();
// Retrieves the previous and current slide elements // Retrieves the previous and current slide elements
Reveal.getPreviousSlide(); Reveal.getPreviousSlide();
Reveal.getCurrentSlide(); Reveal.getCurrentSlide();
Reveal.getIndices(); // { h: 0, v: 0 } } Reveal.getIndices(); // { h: 0, v: 0 } }
// State checks
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();
``` ```
### Ready event ### Ready event
@ -236,21 +243,9 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
} ); } );
``` ```
### States
If you set ``data-state="somestate"`` on a slide ``<section>``, "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 ### 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 ```<section>``` elements. Below are a few examples. Slides are contained within 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 ```<section>``` elements. Below are a few examples.
```html ```html
<section data-background="#ff0000"> <section data-background="#ff0000">
@ -267,6 +262,19 @@ Slides are contained withing 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. 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.
### States
If you set ``data-state="somestate"`` on a slide ``<section>``, "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 );
```
### Internal links ### 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 (```<section id="some-slide">```): 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 (```<section id="some-slide">```):