reveal.js-appearance 1.2.1 → 1.3.1

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +45 -12
  3. package/package.json +64 -20
  4. package/plugin/appearance/appearance.css +120 -202
  5. package/plugin/appearance/appearance.esm.js +8 -493
  6. package/plugin/appearance/appearance.js +8 -501
  7. package/css/demo.css +0 -187
  8. package/demo-markdown.html +0 -62
  9. package/demo.html +0 -391
  10. package/img/1.jpg +0 -0
  11. package/img/2.jpg +0 -0
  12. package/img/3.jpg +0 -0
  13. package/img/4.jpg +0 -0
  14. package/img/5.jpg +0 -0
  15. package/markdown.md +0 -156
  16. package/plugin/appearance/plugin-src.js +0 -458
  17. package/screenshot.png +0 -0
package/css/demo.css DELETED
@@ -1,187 +0,0 @@
1
- :root {
2
- --r-heading-text-transform: none ;
3
- --r-background-color: #1a1626;
4
- --r-main-font-size: 40px;
5
- }
6
-
7
- .slides {
8
- opacity: 0;
9
- -webkit-transition: opacity 0.5s ease;
10
- -o-transition: opacity 0.5s ease;
11
- transition: opacity 0.5s ease;
12
- }
13
-
14
- .reveal.ready .slides {
15
- opacity: 1;
16
- }
17
-
18
- .backgrounds {
19
- background: #1a1626;
20
- }
21
-
22
- .reveal.overview section {
23
- background: #1a1626;
24
- display: -webkit-box;
25
- display: -ms-flexbox;
26
- display: flex;
27
- -webkit-box-orient: vertical;
28
- -webkit-box-direction: normal;
29
- -ms-flex-direction: column;
30
- flex-direction: column;
31
- }
32
-
33
- .slides {
34
- opacity: 0;
35
- -webkit-transition: opacity 0.5s ease;
36
- -o-transition: opacity 0.5s ease;
37
- transition: opacity 0.5s ease;
38
- }
39
- .reveal.ready .slides {
40
- opacity: 1;
41
- }
42
-
43
- .reveal .padded img {
44
- border: none;
45
- margin: 0;
46
- max-width: 100%;
47
- max-height: 100%;
48
- }
49
-
50
- .row {
51
- display: grid;
52
- width: 100%;
53
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
54
- grid-gap: 30px;
55
- }
56
-
57
- .reveal .slides > section,
58
- .reveal .slides > section > section {
59
- -webkit-transform-style: preserve-3d;
60
- transform-style: preserve-3d;
61
- -webkit-perspective: 1000px;
62
- perspective: 1000px;
63
- }
64
-
65
- p.small {
66
- font-size: 75%;
67
- }
68
-
69
- p {
70
- margin: var(--r-block-margin) 0;
71
- }
72
-
73
- .reveal .slides ul li, .reveal .slides ol li {
74
- margin-top: 0.4em;
75
- margin-bottom: 0.2em;
76
- }
77
-
78
- small code {
79
- font-size: 75%;
80
- background: #222D2F;
81
- color: #ddd;
82
- padding: 0.25rem 0.5rem;
83
- border-radius: 0.5rem;
84
- }
85
-
86
- p a code {
87
- background: none;
88
- padding: 0;
89
- text-decoration: underline;
90
- }
91
-
92
- p a[href*=html], p a[href*=http] {
93
- text-decoration: underline;
94
- }
95
-
96
- .reveal pre {
97
- font-size: 0.5em;
98
- }
99
-
100
- .reveal table.imagetable thead {
101
- display: none;
102
- }
103
-
104
- a.github-corner {
105
- position: absolute;
106
- z-index: 1;
107
- width: clamp(50px, 8vmax, 80px);
108
- line-height: 0;
109
- color: rgba(255, 255, 255, 0.5);
110
- }
111
-
112
- a.github-corner:hover {
113
- color: white;
114
- }
115
-
116
- .reveal pre {
117
- width: 100%;
118
- -webkit-box-shadow: none;
119
- box-shadow: none;
120
- font-size: 0.5em;
121
- }
122
-
123
- p code, p kbd, ul code {
124
- background: rgba(180, 180, 180, 0.2);
125
- font-size: 0.8em;
126
- padding: 5px 10px;
127
- border-radius: 4px;
128
- }
129
-
130
- p kbd, ul kbd {
131
- font-family: monospace;
132
- }
133
-
134
- .reveal .code-wrapper, pre, pre code {
135
- white-space: pre-wrap !important;
136
- }
137
-
138
- em[class*=animate] {
139
- display: inline-block;
140
- }
141
-
142
- .reveal img.demoimg {
143
- width: 140px;
144
- height: 140px;
145
- max-width: 100%;
146
- max-height: 100%;
147
- margin: 0.2em;
148
- }
149
-
150
- .centerblock {
151
- height: 100%;
152
- min-height: 100%;
153
- display: -webkit-box;
154
- display: -ms-flexbox;
155
- display: flex;
156
- -webkit-box-orient: vertical;
157
- -webkit-box-direction: normal;
158
- -ms-flex-direction: column;
159
- flex-direction: column;
160
- margin: auto;
161
- }
162
-
163
- ol.twocol {
164
- padding: 0;
165
- margin: 0 auto;
166
- list-style: none;
167
- counter-reset: item;
168
- width: 80%;
169
- -webkit-column-count: 2;
170
- -moz-column-count: 2;
171
- column-count: 2;
172
- -webkit-column-gap: 20px;
173
- -moz-column-gap: 20px;
174
- column-gap: 20px;
175
- }
176
- ol.twocol li {
177
- counter-increment: item;
178
- padding-left: 1.7em;
179
- }
180
- ol.twocol li:before {
181
- content: counter(item) ".";
182
- margin-left: -1.7em;
183
- margin-right: 0.5em;
184
- display: inline-block;
185
- width: 1.2em;
186
- text-align: right;
187
- }
package/demo-markdown.html DELETED
@@ -1,62 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <title>Appearance for Reveal.js</title>
7
- <meta name="description" content="">
8
- <meta name="author" content="Martinomagnifico">
9
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
11
- <link rel="stylesheet" href="../dist/reset.css">
12
- <link rel="stylesheet" href="../dist/reveal.css">
13
- <link rel="stylesheet" href="../dist/theme/black.css">
14
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
15
- <link rel="stylesheet" href="css/demo.css">
16
- </head>
17
-
18
- <body>
19
- <div class="reveal"><a class="github-corner" href="https://github.com/Martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">
20
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
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>
22
- </svg></a>
23
- <div class="slides">
24
- <section data-markdown="markdown.md" data-separator="^
25
- ?
26
- ---
27
- ?
28
- " data-separator-vertical="^
29
- ?
30
- ----
31
- ?
32
- " data-charset="utf-8"></section>
33
- </div>
34
- </div>
35
- <script src="../dist/reveal.js"></script>
36
- <script src="plugin/appearance/appearance.js"></script>
37
- <script src="../plugin/highlight/highlight.js"></script>
38
- <script src="../plugin/markdown/markdown.js"></script>
39
- <script>
40
- Reveal.initialize({
41
- transition: "slide",
42
- history: true,
43
- appearance: {
44
- hideagain: true,
45
- appearevent: "auto",
46
- autoappear: true,
47
- autoelements: {
48
- "ul li": "animate__fadeInLeft",
49
- "ol li": "animate__fadeInLeftRight"
50
- },
51
- compatibility: false
52
- },
53
- plugins: [
54
- RevealMarkdown,
55
- Appearance,
56
- RevealHighlight
57
- ]
58
- });
59
- </script>
60
- </body>
61
-
62
- </html>
package/demo.html DELETED
@@ -1,391 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <title>Appearance for Reveal.js</title>
7
- <meta name="description" content="">
8
- <meta name="author" content="Martinomagnifico">
9
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
11
- <link rel="stylesheet" href="../dist/reset.css">
12
- <link rel="stylesheet" href="../dist/reveal.css">
13
- <link rel="stylesheet" href="../dist/theme/black.css">
14
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
15
- <link rel="stylesheet" href="css/demo.css">
16
- </head>
17
-
18
- <body>
19
- <div class="reveal"><a class="github-corner" href="https://github.com/Martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">
20
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
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>
22
- </svg></a>
23
- <div class="slides">
24
- <section>
25
- <h1 class="animate__flipInX animate__slow">Appearance</h1>
26
- <h3 class="animate__flipInX animate__slow" data-delay="700">for Reveal.js</h3>
27
- </section>
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>
36
- </section>
37
- <section>
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">
53
- </div>
54
- </section>
55
- <section>
56
- <h3>Inside fragments</h3>
57
- <p class="animate__fadeInDown">Like this <span class="animate__fadeInDown animate__faster" style="font-size: .8em">(click next)</span>:</p>
58
- <div class="fragment">
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">
60
- </div>
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>&lt;script src="plugin/appearance/appearance.js"&gt;&lt;/script&gt;
106
- &lt;script&gt;
107
- Reveal.initialize({
108
- plugins: [ Appearance ]
109
- });
110
- &lt;/script&gt;</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>&lt;img class=&quot;animate__fadeInDown&quot; src=&quot;img/1.jpg&quot;&gt;
116
- &lt;img class=&quot;animate__fadeInDown&quot; src=&quot;img/2.jpg&quot;&gt;
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 <a href="https://github.com/Martinomagnifico/quarto-appearance">here</a>. </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>&lt;img class=&quot;animate__fadeInDown&quot; data-delay=&quot;0&quot; src=&quot;img/1.jpg&quot;&gt;
132
- &lt;img class=&quot;animate__fadeInDown&quot; data-delay=&quot;200&quot; src=&quot;img/2.jpg&quot;&gt;
133
- &lt;img class=&quot;animate__fadeInDown&quot; data-delay=&quot;160&quot; src=&quot;img/3.jpg&quot;&gt;
134
- &lt;img class=&quot;animate__fadeInDown&quot; data-delay=&quot;120&quot; src=&quot;img/4.jpg&quot;&gt;
135
- &lt;img class=&quot;animate__fadeInDown&quot; data-delay=&quot;80&quot; src=&quot;img/5.jpg&quot;&gt;</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>&lt;img class=&quot;animate__fadeInDown animate__slower&quot; src=&quot;img/1.jpg&quot;&gt;
144
- &lt;img class=&quot;animate__fadeInDown animate__slow&quot; src=&quot;img/2.jpg&quot;&gt;
145
- &lt;img class=&quot;animate__fadeInDown&quot; src=&quot;img/3.jpg&quot;&gt;
146
- &lt;img class=&quot;animate__fadeInDown animate__fast&quot; src=&quot;img/4.jpg&quot;&gt;
147
- &lt;img class=&quot;animate__fadeInDown animate__faster&quot; src=&quot;img/5.jpg&quot;&gt;</code></pre>
148
- </section>
149
- <section data-auto-animate>
150
- <h3>Change when Appearance starts</h3>
151
- </section>
152
- <section data-auto-animate data-appearevent="auto">
153
- <h3>Change when Appearance starts</h3>
154
- <div>
155
- <p class="animate__fadeInUp">You can use any of the following events:</p>
156
- </div>
157
- <ul>
158
- <li class="animate__fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
159
- <li class="animate__fadeInLeft"><em>slidechanged</em> (with the transition)</li>
160
- <li class="animate__fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
161
- </ul>
162
- <div><br><small class="animate__fadeInUp">This can be set per-slide with data-attributes, or globally in the Appearance options.</small></div>
163
- </section>
164
- </section>
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>&lt;ul&gt;
188
- &lt;li&gt;This is list item 1&lt;/li&gt;
189
- &lt;li&gt;This is list item 2&lt;/li&gt;
190
- &lt;/ul&gt;</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">&lt;section data-autoappear=&quot;true&quot;&gt;
206
- &lt;ul&gt;
207
- &lt;li&gt;This is list item 1&lt;/li&gt;
208
- &lt;li&gt;This is list item 2&lt;/li&gt;
209
- &lt;/ul&gt;
210
- &lt;/section&gt;</code></pre>
211
- </section>
212
- <section data-autoappear="{&quot;ul li&quot;:&quot;animate__fadeInRight&quot;,&quot;h3&quot;:[&quot;animate__fadeInDown, animate__slow&quot;,&quot;100ms&quot;]}">
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>&lt;section data-autoappear='{"ul li":"animate__fadeInRight","h3":["animate__fadeInDown, animate__slow","100ms"]}'&gt;
219
- &lt;h3&gt;Local auto-appear, specified&lt;/h3&gt;
220
- &lt;ul&gt;
221
- &lt;li&gt;This is list item 1&lt;/li&gt;
222
- &lt;li&gt;This is list item 2&lt;/li&gt;
223
- &lt;/ul&gt;
224
- &lt;/section&gt;</code></pre>
225
- </section>
226
- </section>
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&shy;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>
350
- </section>
351
- <section>
352
- <h3>Credits</h3>
353
- <ul>
354
- <li class="animate__fadeInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
355
- <li class="animate__fadeInLeft">Daniel Eden for <a href="https://animate.style" target="_blank">Animate.css</a></li>
356
- <li class="animate__fadeInLeft">David Marby &amp; Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
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>
358
- </ul>
359
- </section>
360
- </div>
361
- </div>
362
- <script src="../dist/reveal.js"></script>
363
- <script src="plugin/appearance/appearance.js"></script>
364
- <script src="../plugin/highlight/highlight.js"></script>
365
- <script src="../plugin/markdown/markdown.js"></script>
366
- <script>
367
- Reveal.initialize({
368
- transition: "slide",
369
- history: true,
370
- width: 1050,
371
- appearance: {
372
- appearparents: true,
373
- hideagain: true,
374
- appearevent: "auto",
375
- autoappear: true,
376
- autoelements: {
377
- "ul li": "animate__fadeInLeft",
378
- "ol li": "animate__fadeInRight"
379
- },
380
- compatibility: false
381
- },
382
- plugins: [
383
- RevealMarkdown,
384
- Appearance,
385
- RevealHighlight
386
- ]
387
- });
388
- </script>
389
- </body>
390
-
391
- </html>
package/img/1.jpg DELETED
Binary file
package/img/2.jpg DELETED
Binary file
package/img/3.jpg DELETED
Binary file
package/img/4.jpg DELETED
Binary file
package/img/5.jpg DELETED
Binary file