| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | |
| 6 | <title>reveal.js - Auto Animate</title> |
| 7 | |
| 8 | <meta |
| 9 | name="viewport" |
| 10 | content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" |
| 11 | /> |
| 12 | |
| 13 | <link rel="stylesheet" href="../dist/reveal.css" /> |
| 14 | <link rel="stylesheet" href="../dist/theme/black.css" id="theme" /> |
| 15 | <link rel="stylesheet" href="../dist/plugin/highlight/monokai.css" /> |
| 16 | </head> |
| 17 | |
| 18 | <body> |
| 19 | <div class="reveal"> |
| 20 | <div class="slides"> |
| 21 | <section data-auto-animate data-auto-animate-unmatched="fade"> |
| 22 | <h3>Auto-Animate Example</h3> |
| 23 | <p>This will fade out</p> |
| 24 | <img src="assets/image1.png" style="height: 100px" /> |
| 25 | <pre data-id="code"><code data-line-numbers class="hljs" data-trim> |
| 26 | function Example() { |
| 27 | const [count, setCount] = useState(0); |
| 28 | } |
| 29 | </code></pre> |
| 30 | </section> |
| 31 | <section data-auto-animate data-auto-animate-unmatched="fade"> |
| 32 | <h3>Auto-Animate Example</h3> |
| 33 | <p style="opacity: 0.2; margin-top: 100px">This will fade out</p> |
| 34 | <p>This element is unmatched</p> |
| 35 | <img src="assets/image1.png" style="height: 150px" /> |
| 36 | <pre data-id="code"><code data-line-numbers class="hljs" data-trim> |
| 37 | function Example() { |
| 38 | New line! |
| 39 | const [count, setCount] = useState(0); |
| 40 | } |
| 41 | </code></pre> |
| 42 | </section> |
| 43 | |
| 44 | <section data-auto-animate> |
| 45 | <p data-id="text-props" style="background: #555; line-height: 1em; letter-spacing: 0em"> |
| 46 | Line Height & Letter Spacing |
| 47 | </p> |
| 48 | </section> |
| 49 | <section data-auto-animate> |
| 50 | <p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em"> |
| 51 | Line Height & Letter Spacing |
| 52 | </p> |
| 53 | </section> |
| 54 | |
| 55 | <section> |
| 56 | <section data-auto-animate> |
| 57 | <pre data-id="code"><code data-line-numbers class="hljs" data-trim> |
| 58 | import React, { useState } from 'react'; |
| 59 | |
| 60 | function Example() { |
| 61 | const [count, setCount] = useState(0); |
| 62 | |
| 63 | return ( |
| 64 | ... |
| 65 | ); |
| 66 | } |
| 67 | </code></pre> |
| 68 | </section> |
| 69 | <section data-auto-animate> |
| 70 | <pre data-id="code"><code data-line-numbers class="hljs" data-trim> |
| 71 | function Example() { |
| 72 | const [count, setCount] = useState(0); |
| 73 | |
| 74 | return ( |
| 75 | <div> |
| 76 | <p>You clicked {count} times</p> |
| 77 | <button onClick={() => setCount(count + 1)}> |
| 78 | Click me |
| 79 | </button> |
| 80 | </div> |
| 81 | ); |
| 82 | } |
| 83 | </code></pre> |
| 84 | </section> |
| 85 | <section data-auto-animate> |
| 86 | <pre data-id="code"><code data-line-numbers class="hljs" data-trim> |
| 87 | function Example() { |
| 88 | // A comment! |
| 89 | const [count, setCount] = useState(0); |
| 90 | |
| 91 | return ( |
| 92 | <div> |
| 93 | <p>You clicked {count} times</p> |
| 94 | <button onClick={() => setCount(count + 1)}> |
| 95 | Click me |
| 96 | </button> |
| 97 | </div> |
| 98 | ); |
| 99 | } |
| 100 | </code></pre> |
| 101 | </section> |
| 102 | </section> |
| 103 | |
| 104 | <section> |
| 105 | <section data-auto-animate> |
| 106 | <h3>Swapping list items</h3> |
| 107 | <ul> |
| 108 | <li>One</li> |
| 109 | <li>Two</li> |
| 110 | <li>Three</li> |
| 111 | </ul> |
| 112 | </section> |
| 113 | <section data-auto-animate> |
| 114 | <h3>Swapping list items</h3> |
| 115 | <ul> |
| 116 | <li>Two</li> |
| 117 | <li>One</li> |
| 118 | <li>Three</li> |
| 119 | </ul> |
| 120 | </section> |
| 121 | <section data-auto-animate> |
| 122 | <h3>Swapping list items</h3> |
| 123 | <ul> |
| 124 | <li>Two</li> |
| 125 | <li>Three</li> |
| 126 | <li>One</li> |
| 127 | </ul> |
| 128 | </section> |
| 129 | </section> |
| 130 | |
| 131 | <section data-auto-animate style="height: 600px"> |
| 132 | <h3 style="opacity: 0.3; font-size: 18px">SLIDE 1</h3> |
| 133 | <h2 data-id="title" style="margin-top: 260px">Animate Anything</h2> |
| 134 | <div |
| 135 | data-id="1" |
| 136 | style=" |
| 137 | background: white; |
| 138 | position: absolute; |
| 139 | top: 150px; |
| 140 | left: 16%; |
| 141 | width: 60px; |
| 142 | height: 60px; |
| 143 | " |
| 144 | ></div> |
| 145 | <div |
| 146 | data-id="2" |
| 147 | style=" |
| 148 | background: white; |
| 149 | position: absolute; |
| 150 | top: 150px; |
| 151 | left: 36%; |
| 152 | width: 60px; |
| 153 | height: 60px; |
| 154 | " |
| 155 | ></div> |
| 156 | <div |
| 157 | data-id="3" |
| 158 | style=" |
| 159 | background: white; |
| 160 | position: absolute; |
| 161 | top: 150px; |
| 162 | left: 56%; |
| 163 | width: 60px; |
| 164 | height: 60px; |
| 165 | " |
| 166 | ></div> |
| 167 | <div |
| 168 | data-id="4" |
| 169 | style=" |
| 170 | background: white; |
| 171 | position: absolute; |
| 172 | top: 150px; |
| 173 | left: 76%; |
| 174 | width: 60px; |
| 175 | height: 60px; |
| 176 | " |
| 177 | ></div> |
| 178 | </section> |
| 179 | <section data-auto-animate style="height: 600px"> |
| 180 | <h3 style="opacity: 0.3; font-size: 18px">SLIDE 2</h3> |
| 181 | <h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2> |
| 182 | <div |
| 183 | data-id="1" |
| 184 | style=" |
| 185 | background: cyan; |
| 186 | position: absolute; |
| 187 | bottom: 190px; |
| 188 | left: 16%; |
| 189 | width: 60px; |
| 190 | height: 60px; |
| 191 | " |
| 192 | ></div> |
| 193 | <div |
| 194 | data-id="2" |
| 195 | style=" |
| 196 | background: magenta; |
| 197 | position: absolute; |
| 198 | bottom: 190px; |
| 199 | left: 36%; |
| 200 | width: 60px; |
| 201 | height: 160px; |
| 202 | " |
| 203 | ></div> |
| 204 | <div |
| 205 | data-id="3" |
| 206 | style=" |
| 207 | background: yellow; |
| 208 | position: absolute; |
| 209 | bottom: 190px; |
| 210 | left: 56%; |
| 211 | width: 60px; |
| 212 | height: 260px; |
| 213 | " |
| 214 | ></div> |
| 215 | <div |
| 216 | data-id="4" |
| 217 | style=" |
| 218 | background: red; |
| 219 | position: absolute; |
| 220 | bottom: 190px; |
| 221 | left: 76%; |
| 222 | width: 60px; |
| 223 | height: 360px; |
| 224 | " |
| 225 | ></div> |
| 226 | </section> |
| 227 | <section data-auto-animate style="height: 600px"> |
| 228 | <h3 style="opacity: 0.3; font-size: 18px">SLIDE 3</h3> |
| 229 | <h2 data-id="title" style="margin-top: 500px; opacity: 0">With Auto Animate</h2> |
| 230 | <div |
| 231 | data-id="1" |
| 232 | style=" |
| 233 | background: cyan; |
| 234 | position: absolute; |
| 235 | top: 50%; |
| 236 | left: 50%; |
| 237 | width: 400px; |
| 238 | height: 400px; |
| 239 | margin: -200px 0 0 -200px; |
| 240 | border-radius: 400px; |
| 241 | " |
| 242 | ></div> |
| 243 | <div |
| 244 | data-id="2" |
| 245 | style=" |
| 246 | background: magenta; |
| 247 | position: absolute; |
| 248 | top: 50%; |
| 249 | left: 50%; |
| 250 | width: 300px; |
| 251 | height: 300px; |
| 252 | margin: -150px 0 0 -150px; |
| 253 | border-radius: 400px; |
| 254 | " |
| 255 | ></div> |
| 256 | <div |
| 257 | data-id="3" |
| 258 | style=" |
| 259 | background: yellow; |
| 260 | position: absolute; |
| 261 | top: 50%; |
| 262 | left: 50%; |
| 263 | width: 200px; |
| 264 | height: 200px; |
| 265 | margin: -100px 0 0 -100px; |
| 266 | border-radius: 400px; |
| 267 | " |
| 268 | ></div> |
| 269 | <div |
| 270 | data-id="4" |
| 271 | style=" |
| 272 | background: red; |
| 273 | position: absolute; |
| 274 | top: 50%; |
| 275 | left: 50%; |
| 276 | width: 100px; |
| 277 | height: 100px; |
| 278 | margin: -50px 0 0 -50px; |
| 279 | border-radius: 400px; |
| 280 | " |
| 281 | ></div> |
| 282 | </section> |
| 283 | <section data-auto-animate style="height: 600px"> |
| 284 | <h3 style="opacity: 0.3; font-size: 18px">SLIDE 3</h3> |
| 285 | <h2 data-id="title" style="margin-top: 500px; opacity: 0">With Auto Animate</h2> |
| 286 | <div |
| 287 | data-id="1" |
| 288 | style=" |
| 289 | background: red; |
| 290 | position: absolute; |
| 291 | top: 250px; |
| 292 | left: 16%; |
| 293 | width: 60px; |
| 294 | height: 60px; |
| 295 | " |
| 296 | ></div> |
| 297 | <div |
| 298 | data-id="2" |
| 299 | style=" |
| 300 | background: yellow; |
| 301 | position: absolute; |
| 302 | top: 250px; |
| 303 | left: 36%; |
| 304 | width: 60px; |
| 305 | height: 60px; |
| 306 | " |
| 307 | ></div> |
| 308 | <div |
| 309 | data-id="3" |
| 310 | style=" |
| 311 | background: magenta; |
| 312 | position: absolute; |
| 313 | top: 250px; |
| 314 | left: 56%; |
| 315 | width: 60px; |
| 316 | height: 60px; |
| 317 | " |
| 318 | ></div> |
| 319 | <div |
| 320 | data-id="4" |
| 321 | style=" |
| 322 | background: cyan; |
| 323 | position: absolute; |
| 324 | top: 250px; |
| 325 | left: 76%; |
| 326 | width: 60px; |
| 327 | height: 60px; |
| 328 | " |
| 329 | ></div> |
| 330 | </section> |
| 331 | |
| 332 | <section data-auto-animate data-auto-animate-id="a"> |
| 333 | <h2>data-auto-animate-id="a"</h2> |
| 334 | <h3>A1</h3> |
| 335 | </section> |
| 336 | <section data-auto-animate data-auto-animate-id="a"> |
| 337 | <h2>data-auto-animate-id="a"</h2> |
| 338 | <h3>A1</h3> |
| 339 | <h3>A2</h3> |
| 340 | </section> |
| 341 | <section data-auto-animate data-auto-animate-id="b"> |
| 342 | <h2>data-auto-animate-id="b"</h2> |
| 343 | <h3>B1</h3> |
| 344 | </section> |
| 345 | <section data-auto-animate data-auto-animate-id="b"> |
| 346 | <h2>data-auto-animate-id="b"</h2> |
| 347 | <h3>B1</h3> |
| 348 | <h3>B2</h3> |
| 349 | </section> |
| 350 | |
| 351 | <section> |
| 352 | <section id="stacked-slide-1" data-auto-animate> |
| 353 | <a href="#/stacked-slide-1">Slide 1</a><br /> |
| 354 | <a href="#/stacked-slide-2">Slide 2</a><br /> |
| 355 | <a href="#/stacked-slide-3">Slide 3</a><br /> |
| 356 | <a href="#/stacked-slide-4">Slide 4</a><br /> |
| 357 | <div |
| 358 | data-id="anim" |
| 359 | style=" |
| 360 | background: indigo; |
| 361 | padding: 8px; |
| 362 | width: 50px; |
| 363 | height: 50px; |
| 364 | position: absolute; |
| 365 | left: 0px; |
| 366 | " |
| 367 | > |
| 368 | A |
| 369 | </div> |
| 370 | </section> |
| 371 | <section id="stacked-slide-2" data-auto-animate> |
| 372 | <a href="#/stacked-slide-1">Slide 1</a><br /> |
| 373 | <a href="#/stacked-slide-2">Slide 2</a><br /> |
| 374 | <a href="#/stacked-slide-3">Slide 3</a><br /> |
| 375 | <a href="#/stacked-slide-4">Slide 4</a><br /> |
| 376 | <div |
| 377 | data-id="anim" |
| 378 | style=" |
| 379 | background: indigo; |
| 380 | padding: 8px; |
| 381 | width: 50px; |
| 382 | height: 50px; |
| 383 | position: absolute; |
| 384 | left: 25%; |
| 385 | " |
| 386 | > |
| 387 | A |
| 388 | </div> |
| 389 | </section> |
| 390 | <section id="stacked-slide-3" data-auto-animate> |
| 391 | <a href="#/stacked-slide-1">Slide 1</a><br /> |
| 392 | <a href="#/stacked-slide-2">Slide 2</a><br /> |
| 393 | <a href="#/stacked-slide-3">Slide 3</a><br /> |
| 394 | <a href="#/stacked-slide-4">Slide 4</a><br /> |
| 395 | <div |
| 396 | data-id="anim" |
| 397 | style=" |
| 398 | background: indigo; |
| 399 | padding: 8px; |
| 400 | width: 50px; |
| 401 | height: 50px; |
| 402 | position: absolute; |
| 403 | left: 50%; |
| 404 | " |
| 405 | > |
| 406 | A |
| 407 | </div> |
| 408 | </section> |
| 409 | <section id="stacked-slide-4" data-auto-animate> |
| 410 | <a href="#/stacked-slide-1">Slide 1</a><br /> |
| 411 | <a href="#/stacked-slide-2">Slide 2</a><br /> |
| 412 | <a href="#/stacked-slide-3">Slide 3</a><br /> |
| 413 | <a href="#/stacked-slide-4">Slide 4</a><br /> |
| 414 | <div |
| 415 | data-id="anim" |
| 416 | style=" |
| 417 | background: indigo; |
| 418 | padding: 8px; |
| 419 | width: 50px; |
| 420 | height: 50px; |
| 421 | position: absolute; |
| 422 | left: 75%; |
| 423 | " |
| 424 | > |
| 425 | A |
| 426 | </div> |
| 427 | </section> |
| 428 | </section> |
| 429 | </div> |
| 430 | </div> |
| 431 | |
| 432 | <script src="../dist/reveal.js"></script> |
| 433 | <script src="../dist/plugin/highlight.js"></script> |
| 434 | <script> |
| 435 | Reveal.initialize({ |
| 436 | center: true, |
| 437 | hash: true, |
| 438 | plugins: [RevealHighlight], |
| 439 | }); |
| 440 | </script> |
| 441 | </body> |
| 442 | </html> |
| 443 |