transition override examples in default contents

diff --git a/index.html b/index.html
index e09ca91f9f1f0ed37c5feaa2a5649c16bed0b121..fab2780dc45341285315307cfc1af558ca25a9b1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -36,7 +36,6 @@
 
                        <!-- Any section element inside of this container is displayed as a slide -->
                        <div class="slides">
-
                                <section>
                                        <h1>Reveal.js</h1>
                                        <h3>HTML Presentations Made Easy</h3>
@@ -223,6 +222,20 @@ Reveal.addEventListener( 'customevent', function() {
                                        </section>
                                </section>
 
+                               <section data-transition="linear" data-background="#4d7e65" data-background-transition="slide">
+                                       <h2>Background Transitions</h2>
+                                       <p>
+                                               Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
+                                       </p>
+                               </section>
+
+                               <section data-transition="linear" data-background="#8c4738" data-background-transition="slide">
+                                       <h2>Background Transition Override</h2>
+                                       <p>
+                                               You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
+                                       </p>
+                               </section>
+
                                <section>
                                        <h2>Clever Quotes</h2>
                                        <p>