Quellcode durchsuchen

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

Hakim El Hattab vor 11 Jahren
Ursprung
Commit
0ce57f1f91
3 geänderte Dateien mit 37 neuen und 15 gelöschten Zeilen
  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>