From da40cf2172792ee56c787dc3e1ca5b65005156e3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 13:33:07 -0400 Subject: [PATCH] add support for fragment styles (#192) --- css/reveal.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 29 ++++++++++++++++------- 2 files changed, 84 insertions(+), 8 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index cd6e8e5..4d0bfa2 100644 --- 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 2becf4f..6a3510e 100644 --- a/index.html +++ b/index.html @@ -252,14 +252,27 @@ function linkify( selector ) {
-

Fragmented Views

-

Hit the next arrow...

-

... to step through ...

-
    -
  1. any type
  2. -
  3. of view
  4. -
  5. fragments
  6. -
+
+

Fragmented Views

+

Hit the next arrow...

+

... to step through ...

+
    +
  1. any type
  2. +
  3. of view
  4. +
  5. fragments
  6. +
+
+
+

Fragment Styles

+

There's a few styles of fragments, like:

+

grow

+

shrink

+

roll-in

+

fade-out

+

highlight-red

+

highlight-green

+

highlight-blue

+