reveal.js-appearance 1.1.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/LICENSE +1 -1
- package/README.md +140 -52
- package/css/demo.css +106 -4
- package/demo-markdown.html +62 -0
- package/demo.html +312 -92
- package/img/5.jpg +0 -0
- package/markdown.md +156 -0
- package/package.json +5 -3
- package/plugin/appearance/appearance.css +17 -1
- package/plugin/appearance/appearance.esm.js +265 -170
- package/plugin/appearance/appearance.js +479 -384
- package/plugin/appearance/plugin-src.js +229 -39
- package/screenshot.png +0 -0
package/demo.html
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
<link rel="stylesheet" href="../dist/reset.css">
|
|
12
12
|
<link rel="stylesheet" href="../dist/reveal.css">
|
|
13
13
|
<link rel="stylesheet" href="../dist/theme/black.css">
|
|
14
|
+
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
|
|
14
15
|
<link rel="stylesheet" href="css/demo.css">
|
|
15
16
|
</head>
|
|
16
17
|
|
|
@@ -20,149 +21,368 @@
|
|
|
20
21
|
<path fill="currentColor" d="M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7"></path>
|
|
21
22
|
</svg></a>
|
|
22
23
|
<div class="slides">
|
|
23
|
-
<section
|
|
24
|
+
<section>
|
|
24
25
|
<h1 class="animate__flipInX animate__slow">Appearance</h1>
|
|
25
26
|
<h3 class="animate__flipInX animate__slow" data-delay="700">for Reveal.js</h3>
|
|
26
27
|
</section>
|
|
27
|
-
<section
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
<li class="animate__bounceInLeft">It adds some impact.</li>
|
|
36
|
-
</ul>
|
|
37
|
-
</section>
|
|
38
|
-
<section class="center">
|
|
39
|
-
<h3>Let images appear</h3>
|
|
40
|
-
<div class="row">
|
|
41
|
-
<div class="padded"><img class="animate__flipInX" data-src="img/1.jpg"></div>
|
|
42
|
-
<div class="padded"><img class="animate__flipInX" data-src="img/2.jpg"></div>
|
|
43
|
-
<div class="padded"><img class="animate__flipInX" data-src="img/3.jpg"></div>
|
|
44
|
-
<div class="padded"><img class="animate__flipInX" data-src="img/4.jpg"></div>
|
|
45
|
-
<div class="padded"><img class="animate__flipInX" data-src="img/5.jpg"></div>
|
|
46
|
-
</div>
|
|
47
|
-
</section>
|
|
48
|
-
<section class="center">
|
|
49
|
-
<h3>Change the delay</h3><small>Use <code>data-delay="*"</code> on each element, where the wildcard is the delay in microseconds from the appearance of the previous element.</small>
|
|
50
|
-
<div class="row">
|
|
51
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/1.jpg" data-delay="0"></div>
|
|
52
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/2.jpg" data-delay="200"></div>
|
|
53
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/3.jpg" data-delay="160"></div>
|
|
54
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/4.jpg" data-delay="120"></div>
|
|
55
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/5.jpg" data-delay="80"></div>
|
|
56
|
-
</div><small><code>data-delay</code> is automatically converted to CSS animation delay.</small>
|
|
28
|
+
<section>
|
|
29
|
+
<section>
|
|
30
|
+
<h2>Why?</h2>
|
|
31
|
+
</section>
|
|
32
|
+
<section>
|
|
33
|
+
<p class="small">In Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result.</p>
|
|
34
|
+
<p class="small">Appearance is easy to set up. It uses <a href="https://animate.style" target="_blank">Animate.css</a> by Daniel Eden for the animations, with some changes to allow for a non-animated state. </p>
|
|
35
|
+
</section>
|
|
57
36
|
</section>
|
|
58
37
|
<section>
|
|
59
|
-
<section
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
38
|
+
<section>
|
|
39
|
+
<h2>Examples</h2>
|
|
40
|
+
<p>Let's check out what Appearance does:</p>
|
|
41
|
+
</section>
|
|
42
|
+
<section>
|
|
43
|
+
<h3>Let text appear</h3>
|
|
44
|
+
<ul>
|
|
45
|
+
<li class="animate__bounceInLeft">Add it to any text element.</li>
|
|
46
|
+
<li class="animate__bounceInLeft">Like list items, or headers.</li>
|
|
47
|
+
<li class="animate__bounceInLeft">It adds some impact.</li>
|
|
48
|
+
</ul>
|
|
49
|
+
</section>
|
|
50
|
+
<section>
|
|
51
|
+
<h3>Let images appear</h3>
|
|
52
|
+
<div class="row"> <img class="animate__flipInX" data-src="img/1.jpg"><img class="animate__flipInX" data-src="img/2.jpg"><img class="animate__flipInX" data-src="img/3.jpg"><img class="animate__flipInX" data-src="img/4.jpg"><img class="animate__flipInX" data-src="img/5.jpg">
|
|
74
53
|
</div>
|
|
75
54
|
</section>
|
|
76
|
-
<section
|
|
55
|
+
<section>
|
|
77
56
|
<h3>Inside fragments</h3>
|
|
78
57
|
<p class="animate__fadeInDown">Like this <span class="animate__fadeInDown animate__faster" style="font-size: .8em">(click next)</span>:</p>
|
|
79
58
|
<div class="fragment">
|
|
80
|
-
<div class="row">
|
|
81
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/1.jpg"></div>
|
|
82
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/2.jpg"></div>
|
|
83
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/3.jpg"></div>
|
|
84
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/4.jpg"></div>
|
|
85
|
-
<div class="padded"><img class="animate__fadeInDown" data-src="img/5.jpg"></div>
|
|
59
|
+
<div class="row"><img class="animate__fadeInDown" data-src="img/1.jpg"><img class="animate__fadeInDown" data-src="img/2.jpg"><img class="animate__fadeInDown" data-src="img/3.jpg"><img class="animate__fadeInDown" data-src="img/4.jpg"><img class="animate__fadeInDown" data-src="img/5.jpg">
|
|
86
60
|
</div>
|
|
87
61
|
</div>
|
|
62
|
+
<p class="small">Note: do not use animation classes directly on fragments. Fragments use property animation while Appearance uses keyframe animation. Combining these gives unpredictable results.</p>
|
|
63
|
+
</section>
|
|
64
|
+
<section>
|
|
65
|
+
<h3>Animate.css animations</h3>
|
|
66
|
+
<p class="small">Appearance supports the standard entrance/in animations that Animate.css offers. Some examples:</p>
|
|
67
|
+
<ul>
|
|
68
|
+
<li class="small animate__backInDown" data-delay="0">.animate__backInDown</li>
|
|
69
|
+
<li class="small animate__bounceInDown" data-delay="1000">.animate__bounceInDown</li>
|
|
70
|
+
<li class="small animate__fadeInLeft" data-delay="1000">.animate__fadeInLeft</li>
|
|
71
|
+
<li class="small animate__flipInX" data-delay="1000">.animate__flipInX</li>
|
|
72
|
+
<li class="small animate__rotateIn" data-delay="1000">.animate__rotateIn</li>
|
|
73
|
+
<li class="small animate__zoomInDown" data-delay="1000">.animate__zoomInDown</li>
|
|
74
|
+
<li class="small animate__jackInTheBox" data-delay="1000">.animate__jackInTheBox</li>
|
|
75
|
+
</ul>
|
|
76
|
+
</section>
|
|
77
|
+
<section>
|
|
78
|
+
<h3>Additional animations</h3>
|
|
79
|
+
<ul>
|
|
80
|
+
<li class="animate__skidLeft" data-delay="300">Appear with .animate__skidLeft</li>
|
|
81
|
+
<li class="animated animate__skidLeftBig" data-delay="1000">Appear with .animate__skidLeftBig</li>
|
|
82
|
+
<li class="animated animate__skidRight" data-delay="1000">Appear with .animate__skidRight</li>
|
|
83
|
+
<li class="animated animate__skidRightBig" data-delay="1000">Appear with .animate__skidRightBig</li>
|
|
84
|
+
<li class="animated animate__shrinkIn" data-delay="1000">Appear with .animate__shrinkIn</li>
|
|
85
|
+
<li class="animated animate__shrinkInBlur" data-delay="1000">Appear with .animate__shrinkInBlur</li>
|
|
86
|
+
</ul>
|
|
87
|
+
</section>
|
|
88
|
+
</section>
|
|
89
|
+
<section>
|
|
90
|
+
<section>
|
|
91
|
+
<h2>Setup</h2>
|
|
92
|
+
</section>
|
|
93
|
+
<section>
|
|
94
|
+
<h2>Basics</h2>
|
|
95
|
+
<p>There are really only three steps:</p>
|
|
96
|
+
<ol>
|
|
97
|
+
<li class="animate__fadeInLeft">Install Appearance</li>
|
|
98
|
+
<li class="animate__fadeInLeft">Edit the markup to add animation classes</li>
|
|
99
|
+
<li class="animate__fadeInLeft">Enjoy the animations</li>
|
|
100
|
+
</ol>
|
|
101
|
+
</section>
|
|
102
|
+
<section>
|
|
103
|
+
<h3>JavaScript</h3>
|
|
104
|
+
<p class="small">Load the script and make a reference to it in the Reveal plugin options:</p>
|
|
105
|
+
<pre><code class="hljs html" data-line-numbers><script src="plugin/appearance/appearance.js"></script>
|
|
106
|
+
<script>
|
|
107
|
+
Reveal.initialize({
|
|
108
|
+
plugins: [ Appearance ]
|
|
109
|
+
});
|
|
110
|
+
</script></code></pre>
|
|
111
|
+
</section>
|
|
112
|
+
<section>
|
|
113
|
+
<h3>Markup</h3>
|
|
114
|
+
<p class="small">Add an animation class to the elements that you would like to have animated when the slide appears:</p>
|
|
115
|
+
<pre><code class="hljs html" data-line-numbers><img class="animate__fadeInDown" src="img/1.jpg">
|
|
116
|
+
<img class="animate__fadeInDown" src="img/2.jpg">
|
|
117
|
+
</code></pre>
|
|
118
|
+
<p class="small">Check the <a href="demo-markdown.html">Markdown demo</a> to see how you do this in Markdown. A Quarto extension can be found here. </p>
|
|
119
|
+
<p class="small">To simplify it <em>in any markup</em>, you can use the <a href="#/autoappear"><code>autoappear</code></a> option.</p>
|
|
120
|
+
</section>
|
|
121
|
+
</section>
|
|
122
|
+
<section>
|
|
123
|
+
<section>
|
|
124
|
+
<h2>Now change it</h2>
|
|
125
|
+
<p>You can change the delay, speed and start of animations easily: </p>
|
|
126
|
+
</section>
|
|
127
|
+
<section>
|
|
128
|
+
<h3>Change the delay</h3><small>Use <code>data-delay="*"</code> on each element, where the wildcard is the delay in microseconds from the appearance of the previous element.</small>
|
|
129
|
+
<div class="row"><img class="animate__fadeInDown" data-src="img/1.jpg" data-delay="0"><img class="animate__fadeInDown" data-src="img/2.jpg" data-delay="200"><img class="animate__fadeInDown" data-src="img/3.jpg" data-delay="160"><img class="animate__fadeInDown" data-src="img/4.jpg" data-delay="120"><img class="animate__fadeInDown" data-src="img/5.jpg" data-delay="80">
|
|
130
|
+
</div>
|
|
131
|
+
<pre><code class="hljs html" data-line-numbers><img class="animate__fadeInDown" data-delay="0" src="img/1.jpg">
|
|
132
|
+
<img class="animate__fadeInDown" data-delay="200" src="img/2.jpg">
|
|
133
|
+
<img class="animate__fadeInDown" data-delay="160" src="img/3.jpg">
|
|
134
|
+
<img class="animate__fadeInDown" data-delay="120" src="img/4.jpg">
|
|
135
|
+
<img class="animate__fadeInDown" data-delay="80" src="img/5.jpg"></code></pre><small><code>data-delay</code> is automatically converted to CSS animation delay.</small>
|
|
136
|
+
</section>
|
|
137
|
+
<section>
|
|
138
|
+
<h3>Change the animation speed</h3><small>Use the speed classes from Animate.css to change the speed of the animation:</small>
|
|
139
|
+
<div class="row"><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__slower</code></small><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__slow</code></small><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"></small><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__fast</code></small><small class="animate__fadeIn" style="font-size: 1rem" data-delay="50"><code>.animate__faster</code></small>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="row"><img class="animate__bounceIn animate__slower" data-src="img/1.jpg"><img class="animate__bounceIn animate__slow" data-src="img/2.jpg"><img class="animate__bounceIn" data-src="img/3.jpg"><img class="animate__bounceIn animate__fast" data-src="img/4.jpg"><img class="animate__bounceIn animate__faster" data-src="img/5.jpg">
|
|
142
|
+
</div>
|
|
143
|
+
<pre><code class="hljs html" data-line-numbers><img class="animate__fadeInDown animate__slower" src="img/1.jpg">
|
|
144
|
+
<img class="animate__fadeInDown animate__slow" src="img/2.jpg">
|
|
145
|
+
<img class="animate__fadeInDown" src="img/3.jpg">
|
|
146
|
+
<img class="animate__fadeInDown animate__fast" src="img/4.jpg">
|
|
147
|
+
<img class="animate__fadeInDown animate__faster" src="img/5.jpg"></code></pre>
|
|
88
148
|
</section>
|
|
89
|
-
<section
|
|
149
|
+
<section data-auto-animate>
|
|
90
150
|
<h3>Change when Appearance starts</h3>
|
|
91
151
|
</section>
|
|
92
|
-
<section
|
|
152
|
+
<section data-auto-animate data-appearevent="auto">
|
|
93
153
|
<h3>Change when Appearance starts</h3>
|
|
94
154
|
<div>
|
|
95
|
-
<p class="
|
|
155
|
+
<p class="animate__fadeInUp">You can use any of the following events:</p>
|
|
96
156
|
</div>
|
|
97
157
|
<ul>
|
|
98
158
|
<li class="animate__fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
|
|
99
159
|
<li class="animate__fadeInLeft"><em>slidechanged</em> (with the transition)</li>
|
|
100
160
|
<li class="animate__fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
|
|
101
161
|
</ul>
|
|
102
|
-
<div><br><small class="animate__fadeInUp">This can
|
|
162
|
+
<div><br><small class="animate__fadeInUp">This can be set per-slide with data-attributes, or globally in the Appearance options.</small></div>
|
|
103
163
|
</section>
|
|
104
164
|
</section>
|
|
105
|
-
<section
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
165
|
+
<section>
|
|
166
|
+
<section id="autoappear">
|
|
167
|
+
<h2>Autoappear</h2>
|
|
168
|
+
<p>You can simplify the addition of animation classes:</p>
|
|
169
|
+
</section>
|
|
170
|
+
<section>
|
|
171
|
+
<p class="small">Sometimes (for example with Markdown), adding classes to elements is a chore. </p>
|
|
172
|
+
<p class="small">Appearance can automatically add animation classes to specific elements (tags or other selectors) in the presentation (with the option <code>autoappear</code>) or per slide (with <code>data-autoappear</code>).</p>
|
|
173
|
+
</section>
|
|
174
|
+
<section>
|
|
175
|
+
<h3>Global autoappear mode</h3>
|
|
176
|
+
<ul>
|
|
177
|
+
<li>This is list item 1</li>
|
|
178
|
+
<li>This is list item 2</li>
|
|
179
|
+
</ul>
|
|
180
|
+
<pre><code class="hljs js" data-line-numbers="4,5">Reveal.initialize({
|
|
181
|
+
// ...
|
|
182
|
+
appearance: {
|
|
183
|
+
autoappear: true,
|
|
184
|
+
autoelements: '{"ul li": "animate__fadeInLeft"}'
|
|
185
|
+
}
|
|
186
|
+
// ...</code></pre>
|
|
187
|
+
<pre><code class="hljs html" data-line-numbers><ul>
|
|
188
|
+
<li>This is list item 1</li>
|
|
189
|
+
<li>This is list item 2</li>
|
|
190
|
+
</ul></code></pre>
|
|
191
|
+
</section>
|
|
192
|
+
<section data-autoappear="true">
|
|
193
|
+
<h3>Local auto-appear</h3>
|
|
194
|
+
<ul>
|
|
195
|
+
<li>This is list item 1</li>
|
|
196
|
+
<li>This is list item 2</li>
|
|
197
|
+
</ul>
|
|
198
|
+
<pre><code class="hljs js" data-line-numbers="4,5">Reveal.initialize({
|
|
199
|
+
// ...
|
|
200
|
+
appearance: {
|
|
201
|
+
autoappear: false,
|
|
202
|
+
autoelements: '{"ul li": "animate__fadeInLeft"}'
|
|
203
|
+
}
|
|
204
|
+
// ...</code></pre>
|
|
205
|
+
<pre><code class="hljs html" data-line-numbers="1"><section data-autoappear="true">
|
|
206
|
+
<ul>
|
|
207
|
+
<li>This is list item 1</li>
|
|
208
|
+
<li>This is list item 2</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</section></code></pre>
|
|
211
|
+
</section>
|
|
212
|
+
<section data-autoappear="{"ul li":"animate__fadeInRight","h3":["animate__fadeInDown, animate__slow","100ms"]}">
|
|
213
|
+
<h3>Local auto-appear, specified</h3><small>You can also add a JSON object to the slide’s <code>data-autoappear</code>, with specific elements, their animations class as a string or an array with animations class, optional speed class and delay.</small>
|
|
214
|
+
<ul>
|
|
215
|
+
<li>This is list item 1</li>
|
|
216
|
+
<li>This is list item 2</li>
|
|
217
|
+
</ul>
|
|
218
|
+
<pre><code class="hljs html" data-line-numbers><section data-autoappear='{"ul li":"animate__fadeInRight","h3":["animate__fadeInDown, animate__slow","100ms"]}'>
|
|
219
|
+
<h3>Local auto-appear, specified</h3>
|
|
220
|
+
<ul>
|
|
221
|
+
<li>This is list item 1</li>
|
|
222
|
+
<li>This is list item 2</li>
|
|
223
|
+
</ul>
|
|
224
|
+
</section></code></pre>
|
|
225
|
+
</section>
|
|
125
226
|
</section>
|
|
126
|
-
<section
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
227
|
+
<section>
|
|
228
|
+
<section>
|
|
229
|
+
<h2>Options</h2>
|
|
230
|
+
<div class="centerblock">
|
|
231
|
+
<ol class="twocol" style="margin-right: 5%">
|
|
232
|
+
<li>hideagain</li>
|
|
233
|
+
<li>delay</li>
|
|
234
|
+
<li>appearevent</li>
|
|
235
|
+
<li>autoappear</li>
|
|
236
|
+
<li>autoelements</li>
|
|
237
|
+
<li>csspath</li>
|
|
238
|
+
<li>animatecsspath</li>
|
|
239
|
+
<li>compatibility</li>
|
|
240
|
+
<li>compatibility­baseclass</li>
|
|
241
|
+
</ol>
|
|
242
|
+
</div>
|
|
243
|
+
</section>
|
|
244
|
+
<section>
|
|
245
|
+
<h4>Option 1: hideagain</h4>
|
|
246
|
+
<p class="small">The <code>hideagain</code> option will hide elements (that have appeared on the slide) again when moving away from that slide. </p>
|
|
247
|
+
<pre><code class="hljs js" data-line-numbers="4">Reveal.initialize({
|
|
248
|
+
...
|
|
249
|
+
appearance: {
|
|
250
|
+
hideagain: true
|
|
251
|
+
},
|
|
252
|
+
plugins: [ Appearance ]
|
|
253
|
+
})</code></pre>
|
|
254
|
+
</section>
|
|
255
|
+
<section>
|
|
256
|
+
<h4>Option 2: delay</h4>
|
|
257
|
+
<p class="small">The <code>delay</code> option is the base time in ms between appearances. This value governs any elements that do not have an Animate.css speed class assigned to it, or are not inside a slide which includes delay in a data-autoappear attribute.</p>
|
|
258
|
+
<pre><code class="hljs js" data-line-numbers="4">Reveal.initialize({
|
|
259
|
+
...
|
|
260
|
+
appearance: {
|
|
261
|
+
delay: 300
|
|
262
|
+
},
|
|
263
|
+
plugins: [ Appearance ]
|
|
264
|
+
})</code></pre>
|
|
265
|
+
</section>
|
|
266
|
+
<section>
|
|
267
|
+
<h4>Option 3: appearevent</h4>
|
|
268
|
+
<p class="small">You can change when Appearance starts with any of the following events: <code>slidetransitionend</code> (default, after the transition), <code>slidechanged</code> (with the transition) and <code>auto</code> (with transition, on autoanimate slides). This can be overridden per-slide with data-attributes, like this: <code>data-appearevent="auto"</code>.</p>
|
|
269
|
+
<pre><code class="hljs js" data-line-numbers="4">Reveal.initialize({
|
|
270
|
+
...
|
|
271
|
+
appearance: {
|
|
272
|
+
appearevent: slidetransitionend
|
|
273
|
+
},
|
|
274
|
+
plugins: [ Appearance ]
|
|
275
|
+
})</code></pre>
|
|
276
|
+
</section>
|
|
277
|
+
<section>
|
|
278
|
+
<h4>Option 4: autoappear</h4>
|
|
279
|
+
<p class="small">The <code>autoappear</code> option works together with the <code>autoelements</code> option. When it is set to <code>true</code>, any elements in the autoelements option will animate with the declared animation when the slide or fragment opens. See <a href="#/autoappear"><code>autoappear</code></a>.</p>
|
|
280
|
+
<pre><code class="hljs js" data-line-numbers="4,5">Reveal.initialize({
|
|
281
|
+
...
|
|
282
|
+
appearance: {
|
|
283
|
+
autoappear: false,
|
|
284
|
+
autoelements: false
|
|
285
|
+
},
|
|
286
|
+
plugins: [ Appearance ]
|
|
287
|
+
})</code></pre>
|
|
288
|
+
</section>
|
|
289
|
+
<section>
|
|
290
|
+
<h4>Option 5: autoelements</h4>
|
|
291
|
+
<p class="small">These are the elements that <code>autoappear</code> will target. Each element has a selector and an animation class. If autoappear is off, the elements will still get animation if the section contains a data-autoappear attribute.</p>
|
|
292
|
+
<pre><code class="hljs js" data-line-numbers="4,5">Reveal.initialize({
|
|
293
|
+
...
|
|
294
|
+
appearance: {
|
|
295
|
+
autoappear: false,
|
|
296
|
+
autoelements: false
|
|
297
|
+
},
|
|
298
|
+
plugins: [ Appearance ]
|
|
299
|
+
})</code></pre>
|
|
300
|
+
</section>
|
|
301
|
+
<section>
|
|
302
|
+
<h4>Option 6: csspath</h4>
|
|
303
|
+
<p class="small">Appearance will automatically load the styling of the plugin. If you want to customise the styling, you can link to your own CSS file here.</p>
|
|
304
|
+
<pre><code class="hljs js" data-line-numbers="4,5">Reveal.initialize({
|
|
305
|
+
...
|
|
306
|
+
appearance: {
|
|
307
|
+
csspath: ''
|
|
308
|
+
},
|
|
309
|
+
plugins: [ Appearance ]
|
|
310
|
+
})</code></pre>
|
|
311
|
+
</section>
|
|
312
|
+
<section>
|
|
313
|
+
<h4>Option 7: animatecsspath</h4>
|
|
314
|
+
<p class="small">Appearance will also automatically load the styling of Animate.css via a CDN. Note that Animate.css has two links, the first (CDN) one is for version 4, the second (old) one is the version 3 compatibility CDN link.</p>
|
|
315
|
+
<pre><code class="hljs js" data-line-numbers="4-7">Reveal.initialize({
|
|
316
|
+
...
|
|
317
|
+
appearance: {
|
|
318
|
+
animatecsspath: {
|
|
319
|
+
link : 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
|
|
320
|
+
compat : 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css',
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
plugins: [ Appearance ]
|
|
324
|
+
})</code></pre>
|
|
325
|
+
</section>
|
|
326
|
+
<section>
|
|
327
|
+
<h4>Option 8: compatibility</h4>
|
|
328
|
+
<p class="small">This setting is about the breaking changes in Animate.css (used by Appearance). See the migration guide in the Readme for more info. </p>
|
|
329
|
+
<p class="small">Setting <code>'compatibility: true'</code> can let you use your old markup.</p>
|
|
330
|
+
<pre><code class="hljs js" data-line-numbers="4">Reveal.initialize({
|
|
331
|
+
...
|
|
332
|
+
appearance: {
|
|
333
|
+
compatibility: false
|
|
334
|
+
},
|
|
335
|
+
plugins: [ Appearance ]
|
|
336
|
+
})</code></pre>
|
|
337
|
+
</section>
|
|
338
|
+
<section>
|
|
339
|
+
<h4>Option 9: compatibilitybaseclass</h4>
|
|
340
|
+
<p class="small">This setting is about the breaking changes in Animate.css (used by Appearance). See the migration guide in the Readme for more info. </p>
|
|
341
|
+
<p class="small">This is the baseclass to use if you don't change your markup.</p>
|
|
342
|
+
<pre><code class="hljs js" data-line-numbers="4">Reveal.initialize({
|
|
343
|
+
...
|
|
344
|
+
appearance: {
|
|
345
|
+
compatibilitybaseclass: 'animated'
|
|
346
|
+
},
|
|
347
|
+
plugins: [ Appearance ]
|
|
348
|
+
})</code></pre>
|
|
349
|
+
</section>
|
|
136
350
|
</section>
|
|
137
|
-
<section
|
|
351
|
+
<section>
|
|
138
352
|
<h3>Credits</h3>
|
|
139
353
|
<ul>
|
|
140
354
|
<li class="animate__fadeInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
|
|
141
355
|
<li class="animate__fadeInLeft">Daniel Eden for <a href="https://animate.style" target="_blank">Animate.css</a></li>
|
|
142
356
|
<li class="animate__fadeInLeft">David Marby & Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
|
|
143
|
-
<li class="animate__fadeInLeft">Photography by <a href="https://unsplash.com/photos/6WLGMivmV00" target="_blank">Michael Baird</a>, <a href="https://unsplash.com/photos/scwYrU5hCSM" target="_blank">Michael Quinn</a>, <a href="https://unsplash.com/photos/YoadQb46v6k" target="_blank">Craig Garner</a>, <a href="https://unsplash.com/photos/RlYsCMbF6EI" target="_blank">Grzegorz Mleczek</a> and <a href="https://unsplash.com/photos/
|
|
357
|
+
<li class="animate__fadeInLeft">Photography by <a href="https://unsplash.com/photos/6WLGMivmV00" target="_blank">Michael Baird</a>, <a href="https://unsplash.com/photos/scwYrU5hCSM" target="_blank">Michael Quinn</a>, <a href="https://unsplash.com/photos/YoadQb46v6k" target="_blank">Craig Garner</a>, <a href="https://unsplash.com/photos/RlYsCMbF6EI" target="_blank">Grzegorz Mleczek</a> and <a href="https://unsplash.com/photos/QrRSm-QbjW0" target="_blank">Fabrice Villard</a>.</li>
|
|
144
358
|
</ul>
|
|
145
359
|
</section>
|
|
146
360
|
</div>
|
|
147
361
|
</div>
|
|
148
362
|
<script src="../dist/reveal.js"></script>
|
|
149
363
|
<script src="plugin/appearance/appearance.js"></script>
|
|
364
|
+
<script src="../plugin/highlight/highlight.js"></script>
|
|
365
|
+
<script src="../plugin/markdown/markdown.js"></script>
|
|
150
366
|
<script>
|
|
151
367
|
Reveal.initialize({
|
|
152
368
|
transition: "slide",
|
|
153
369
|
history: true,
|
|
370
|
+
width: 1050,
|
|
154
371
|
appearance: {
|
|
372
|
+
appearparents: true,
|
|
155
373
|
hideagain: true,
|
|
156
374
|
appearevent: "auto",
|
|
157
|
-
autoappear:
|
|
375
|
+
autoappear: true,
|
|
158
376
|
autoelements: {
|
|
159
377
|
"ul li": "animate__fadeInLeft",
|
|
160
|
-
"ol li": "
|
|
378
|
+
"ol li": "animate__fadeInRight"
|
|
161
379
|
},
|
|
162
380
|
compatibility: false
|
|
163
381
|
},
|
|
164
382
|
plugins: [
|
|
165
|
-
|
|
383
|
+
RevealMarkdown,
|
|
384
|
+
Appearance,
|
|
385
|
+
RevealHighlight
|
|
166
386
|
]
|
|
167
387
|
});
|
|
168
388
|
</script>
|
package/img/5.jpg
CHANGED
|
Binary file
|
package/markdown.md
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
# Appearance <!-- .element: class="animate__flipInX slow" -->
|
|
2
|
+
### for Reveal.js <!-- .element: class="animate__flipInX slow" -->
|
|
3
|
+
|
|
4
|
+
Using Markdown <!-- .element: class="animate__flipInX slow" -->
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Why?
|
|
9
|
+
|
|
10
|
+
----
|
|
11
|
+
|
|
12
|
+
In Powerpoint you can make slides with items that appear automatically and sequentially with effects. Appearance is a plugin for Reveal.js that does the same.
|
|
13
|
+
|
|
14
|
+
Appearance is easy to set up. It uses [Animate.css](https://animate.style) by Daniel Eden for the animations, with some changes to allow for a non-animated state.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Examples
|
|
19
|
+
Let's check out what Appearance does:
|
|
20
|
+
|
|
21
|
+
----
|
|
22
|
+
|
|
23
|
+
## Let text appear
|
|
24
|
+
|
|
25
|
+
* Add it to any text element <!-- .element: class="animate__bounceInLeft" -->
|
|
26
|
+
* Like list items, or headers. <!-- .element: class="animate__bounceInLeft" -->
|
|
27
|
+
* It adds some impact. <!-- .element: class="animate__bounceInLeft" -->
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
```html []
|
|
31
|
+
* Add it to any text element <!-- .element: class="animate__bounceInLeft" -->
|
|
32
|
+
* Like list items, or headers. <!-- .element: class="animate__bounceInLeft" -->
|
|
33
|
+
* It adds some impact. <!-- .element: class="animate__bounceInLeft" -->
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
----
|
|
37
|
+
|
|
38
|
+
## Let images appear
|
|
39
|
+
|
|
40
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
41
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
42
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
43
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
44
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
45
|
+
|
|
46
|
+
```html []
|
|
47
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
48
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
49
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
50
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
51
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
----
|
|
55
|
+
|
|
56
|
+
## Inside fragments
|
|
57
|
+
|
|
58
|
+
Like this *(click next)<!-- .element: class="animate__fadeInDown animate__faster" -->*:
|
|
59
|
+
<!-- .element: class="animate__fadeInDown" -->
|
|
60
|
+
|
|
61
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
62
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
63
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
64
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
65
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
66
|
+
<!-- .element: class="fragment" -->
|
|
67
|
+
|
|
68
|
+
```html []
|
|
69
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
70
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
71
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
72
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
73
|
+
 <!-- .element: class="animate__flipInX demoimg" -->
|
|
74
|
+
<!-- .element: class="fragment" -->
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Auto-appear
|
|
80
|
+
You can simplify the addition of animation classes:
|
|
81
|
+
|
|
82
|
+
----
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
Sometimes (for example with Markdown), adding classes to elements is a chore.
|
|
86
|
+
|
|
87
|
+
Appearance can automatically add animation classes to specific elements (tags or other selectors) in the presentation (with the option `autoappear`) or per slide (with `data-autoappear`).
|
|
88
|
+
|
|
89
|
+
----
|
|
90
|
+
|
|
91
|
+
### Global auto-appear mode
|
|
92
|
+
* This is list item 1
|
|
93
|
+
* This is list item 2
|
|
94
|
+
|
|
95
|
+
```html []
|
|
96
|
+
### Global auto-appear mode
|
|
97
|
+
* This is list item 1
|
|
98
|
+
* This is list item 2
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
```html []
|
|
102
|
+
<script>
|
|
103
|
+
//...
|
|
104
|
+
appearance: {
|
|
105
|
+
autoappear: true,
|
|
106
|
+
autoelements: {'ul li': 'animate__fadeInLeft'}
|
|
107
|
+
},
|
|
108
|
+
plugins: [ RevealMarkdown, Appearance ]
|
|
109
|
+
</script>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
This shows how to globally set elements to appear.<!-- .element: class="small" -->
|
|
113
|
+
|
|
114
|
+
----
|
|
115
|
+
|
|
116
|
+
### Local auto-appear
|
|
117
|
+
<!-- .slide: data-autoappear="true" -->
|
|
118
|
+
* This is list item 1
|
|
119
|
+
* This is list item 2
|
|
120
|
+
|
|
121
|
+
```html []
|
|
122
|
+
<!-- .slide: data-autoappear="true" -->
|
|
123
|
+
### Local auto-appear
|
|
124
|
+
* This is list item 1
|
|
125
|
+
* This is list item 2
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
```html []
|
|
129
|
+
<script>
|
|
130
|
+
//...
|
|
131
|
+
appearance: {
|
|
132
|
+
autoappear: false,
|
|
133
|
+
autoelements: {'ul li': 'animate__fadeInLeft'}
|
|
134
|
+
},
|
|
135
|
+
plugins: [ RevealMarkdown, Appearance ]
|
|
136
|
+
</script>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Local auto-appear uses a data-attribute per slide.<!-- .element: class="small" -->
|
|
140
|
+
|
|
141
|
+
----
|
|
142
|
+
|
|
143
|
+
<!-- .slide: data-autoappear="{'ul li':'animate__fadeInRight','h3':['animate__fadeInDown, animate__slow','100ms']}" -->
|
|
144
|
+
### Local auto-appear, specified
|
|
145
|
+
|
|
146
|
+
You can also add a JSON object to the slide’s auto-appear data-attribute, with specific elements, their animations class/classes and optional delay.<!-- .element: class="small" -->
|
|
147
|
+
|
|
148
|
+
* This is list item 1
|
|
149
|
+
* This is list item 2
|
|
150
|
+
|
|
151
|
+
```html []
|
|
152
|
+
<!-- .slide: data-autoappear="{'ul li':'animate__fadeInRight','h3':['animate__fadeInDown, animate__slow','100ms']}" -->
|
|
153
|
+
### Local auto-appear, specified
|
|
154
|
+
* This is list item 1
|
|
155
|
+
* This is list item 2
|
|
156
|
+
```
|