xobs/fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update background test, documented slide backgrounds in readme (#453)

Browse Source
This commit is contained in:
Hakim El Hattab 2013-06-04 21:14:13 +02:00
parent 544e090bd1
commit 0ce57f1f91
3 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
README.md
View File

@ -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 ``<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 );
```
### 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 ``<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
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.
```html
<section data-background="#ff0000">
<h2>All CSS color formats are supported, like rgba() or hsl().</h2>
</section>
<section data-background="http://example.com/image.png">
<h2>This slide will have a full-size background image.</h2>
</section>
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated.</h2>
</section>
```
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 (```<section id="some-slide">```):

2
js/reveal.min.js vendored
View File

@ -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
*

4
test/background.html
View File

@ -50,13 +50,13 @@
</section>
</section>
<section data-background="assets/image1.png">
<section data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
<h2>Background image</h2>
</section>
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
<h2>Background image</h2>
<code>data-background-size="100px" data-background-repeat="repeat"</code>
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
</section>
</div>