diff options
| -rw-r--r-- | README.md | 3 | ||||
| -rw-r--r-- | css/reveal.css | 12 | ||||
| -rw-r--r-- | css/reveal.scss | 16 | ||||
| -rw-r--r-- | demo.html | 10 |
4 files changed, 38 insertions, 3 deletions
@@ -761,7 +761,8 @@ The default fragment style is to start out invisible and fade in. This style can <p class="fragment shrink">shrink</p> <p class="fragment fade-out">fade-out</p> <p class="fragment fade-up">fade-up (also down, left and right!)</p> - <p class="fragment current-visible">visible only once</p> + <p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p> + <p class="fragment fade-in-then-half-out">fades in, then 50% out when we move to the next step</p> <p class="fragment highlight-current-blue">blue only once</p> <p class="fragment highlight-red">highlight-red</p> <p class="fragment highlight-green">highlight-green</p> diff --git a/css/reveal.css b/css/reveal.css index ac095f4..04b704d 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -127,13 +127,25 @@ body { -webkit-transform: translate(0, 0); transform: translate(0, 0); } +.reveal .slides section .fragment.fade-in-then-out, .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; } + .reveal .slides section .fragment.fade-in-then-out.current-fragment, .reveal .slides section .fragment.current-visible.current-fragment { opacity: 1; visibility: inherit; } +.reveal .slides section .fragment.fade-in-then-half-out { + opacity: 0; + visibility: hidden; } + .reveal .slides section .fragment.fade-in-then-half-out.visible { + opacity: 0.5; + visibility: inherit; } + .reveal .slides section .fragment.fade-in-then-half-out.current-fragment { + opacity: 1; + visibility: inherit; } + .reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-green, diff --git a/css/reveal.scss b/css/reveal.scss index efb4114..7e2701b 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -160,6 +160,7 @@ body { } } +.reveal .slides section .fragment.fade-in-then-out, .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; @@ -170,6 +171,21 @@ body { } } +.reveal .slides section .fragment.fade-in-then-half-out { + opacity: 0; + visibility: hidden; + + &.visible { + opacity: 0.5; + visibility: inherit; + } + + &.current-fragment { + opacity: 1; + visibility: inherit; + } +} + .reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-green, @@ -139,8 +139,14 @@ <p class="fragment grow">grow</p> <p class="fragment shrink">shrink</p> <p class="fragment fade-out">fade-out</p> - <p class="fragment fade-up">fade-up (also down, left and right!)</p> - <p class="fragment current-visible">current-visible</p> + <p> + <span style="display: inline-block;" class="fragment fade-right">fade-right, </span> + <span style="display: inline-block;" class="fragment fade-up">up, </span> + <span style="display: inline-block;" class="fragment fade-down">down, </span> + <span style="display: inline-block;" class="fragment fade-left">left</span> + </p> + <p class="fragment fade-in-then-out">fade-in-then-out</p> + <p class="fragment fade-in-then-half-out">fade-in-then-half-out</p> <p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p> </section> </section> |