add support for fragment styles (#192)
This commit is contained in:
parent
a4f03be485
commit
da40cf2172
|
@ -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
|
||||
|
|
29
index.html
29
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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user