add support for fragment styles (#192)

diff --git a/css/reveal.css b/css/reveal.css
index cd6e8e5031f637b2c5bc5d4c3dc79233e0d31df5..4d0bfa2c8dfc686d89429f117149bf9790c0f886 100644 (file)
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -96,6 +96,69 @@ body {
                opacity: 1;
        }
 
+.reveal .slides section .fragment.grow {
+       opacity: 1;
+}
+       .reveal .slides section .fragment.grow.visible {
+               -webkit-transform: scale( 1.3 );
+                  -moz-transform: scale( 1.3 );
+                   -ms-transform: scale( 1.3 );
+                    -o-transform: scale( 1.3 );
+                       transform: scale( 1.3 );
+       }
+
+.reveal .slides section .fragment.shrink {
+       opacity: 1;
+}
+       .reveal .slides section .fragment.shrink.visible {
+               -webkit-transform: scale( 0.7 );
+                  -moz-transform: scale( 0.7 );
+                   -ms-transform: scale( 0.7 );
+                    -o-transform: scale( 0.7 );
+                       transform: scale( 0.7 );
+       }
+
+.reveal .slides section .fragment.roll-in {
+       opacity: 0;
+
+       -webkit-transform: rotateX( 90deg );
+          -moz-transform: rotateX( 90deg );
+           -ms-transform: rotateX( 90deg );
+            -o-transform: rotateX( 90deg );
+               transform: rotateX( 90deg );
+}
+       .reveal .slides section .fragment.roll-in.visible {
+               opacity: 1;
+
+               -webkit-transform: rotateX( 0 );
+                  -moz-transform: rotateX( 0 );
+                   -ms-transform: rotateX( 0 );
+                    -o-transform: rotateX( 0 );
+                       transform: rotateX( 0 );
+       }
+
+.reveal .slides section .fragment.fade-out {
+       opacity: 1;
+}
+       .reveal .slides section .fragment.fade-out.visible {
+               opacity: 0;
+       }
+
+.reveal .slides section .fragment.highlight-red,
+.reveal .slides section .fragment.highlight-green,
+.reveal .slides section .fragment.highlight-blue {
+       opacity: 1;
+}
+       .reveal .slides section .fragment.highlight-red.visible {
+               color: #ff2c2d
+       }
+       .reveal .slides section .fragment.highlight-green.visible {
+               color: #17ff2e;
+       }
+       .reveal .slides section .fragment.highlight-blue.visible {
+               color: #1b91ff;
+       }
+
 
 /*********************************************
  * DEFAULT ELEMENT STYLES

diff --git a/index.html b/index.html
index 2becf4f8038e1f534f235e1f0a0b279633384c02..6a3510ed71637c5f7116f014e4844fa80906c0ee 100644 (file)
--- a/index.html
+++ b/index.html
@@ -252,14 +252,27 @@ function linkify( selector ) {
                                </section>
 
                                <section>
-                                       <h2>Fragmented Views</h2>
-                                       <p>Hit the next arrow...</p>
-                                       <p class="fragment">... to step through ...</p>
-                                       <ol>
-                                               <li class="fragment"><code>any type</code></li>
-                                               <li class="fragment"><em>of view</em></li>
-                                               <li class="fragment"><strong>fragments</strong></li>
-                                       </ol>
+                                       <section>
+                                               <h2>Fragmented Views</h2>
+                                               <p>Hit the next arrow...</p>
+                                               <p class="fragment">... to step through ...</p>
+                                               <ol>
+                                                       <li class="fragment"><code>any type</code></li>
+                                                       <li class="fragment"><em>of view</em></li>
+                                                       <li class="fragment"><strong>fragments</strong></li>
+                                               </ol>
+                                       </section>
+                                       <section>
+                                               <h2>Fragment Styles</h2>
+                                               <p>There's a few styles of fragments, like:</p>
+                                               <p class="fragment grow">grow</p>
+                                               <p class="fragment shrink">shrink</p>
+                                               <p class="fragment roll-in">roll-in</p>
+                                               <p class="fragment fade-out">fade-out</p>
+                                               <p class="fragment highlight-red">highlight-red</p>
+                                               <p class="fragment highlight-green">highlight-green</p>
+                                               <p class="fragment highlight-blue">highlight-blue</p>
+                                       </section>
                                </section>
                                
                                <section>