Browse Source

Added some styles using the current-fragment class

according to README, I don't include reveal.min.js.
Hence I believe it makes sense to not include reveal.min.css either.
Hence, examples added in index.html can give the feeling that they don't work yet.
Guillaume Turri 11 years ago
parent
commit
b46fd8dd70
3 changed files with 26 additions and 1 deletions
  1. 2 0
      README.md
  2. 22 1
      css/reveal.css
  3. 2 0
      index.html

+ 2 - 0
README.md

@@ -440,6 +440,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 roll-in">roll-in</p>
 	<p class="fragment fade-out">fade-out</p>
+	<p class="fragment current-visible">visible only once</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>
 	<p class="fragment highlight-blue">highlight-blue</p>

+ 22 - 1
css/reveal.css

@@ -179,9 +179,20 @@ body {
 		opacity: 0.5;
 	}
 
+.reveal .slides section .fragment.current-visible {
+	opacity:0;
+}
+
+.reveal .slides section .fragment.current-visible.current-fragment {
+	opacity:1;
+}
+
 .reveal .slides section .fragment.highlight-red,
+.reveal .slides section .fragment.highlight-current-red,
 .reveal .slides section .fragment.highlight-green,
-.reveal .slides section .fragment.highlight-blue {
+.reveal .slides section .fragment.highlight-current-green,
+.reveal .slides section .fragment.highlight-blue,
+.reveal .slides section .fragment.highlight-current-blue {
 	opacity: 1;
 }
 	.reveal .slides section .fragment.highlight-red.visible {
@@ -194,6 +205,16 @@ body {
 		color: #1b91ff;
 	}
 
+.reveal .slides section .fragment.highlight-current-red.current-fragment {
+	color: #ff2c2d
+}
+.reveal .slides section .fragment.highlight-current-green.current-fragment {
+	color: #17ff2e;
+}
+.reveal .slides section .fragment.highlight-current-blue.current-fragment {
+	color: #1b91ff;
+}
+
 
 /*********************************************
  * DEFAULT ELEMENT STYLES

+ 2 - 0
index.html

@@ -302,6 +302,8 @@ function linkify( selector ) {
 						<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 current-visible">visible only once</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>
 						<p class="fragment highlight-blue">highlight-blue</p>