浏览代码

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

Hakim El Hattab 12 年之前
父节点
当前提交
0ce57f1f91
共有 3 个文件被更改,包括 37 次插入15 次删除
  1. 34 12
      README.md
  2. 1 1
      js/reveal.min.js
  3. 2 2
      test/background.html

+ 34 - 12
README.md

@@ -106,6 +106,9 @@ Reveal.initialize({
 	// Transition speed
 	// Transition speed
 	transitionSpeed: 'default', // default/fast/slow
 	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 } }
 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
 ### Ready event
 
 
 The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
 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
 ### 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">```):

+ 1 - 1
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
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  * MIT licensed
  *
  *

+ 2 - 2
test/background.html

@@ -50,13 +50,13 @@
 					</section>
 					</section>
 				</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>
 					<h2>Background image</h2>
 				</section>
 				</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)">
 				<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>
 					<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>
 				</section>
 				
 				
 			</div>
 			</div>