Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / e1893aed9df79d26db48538ace56cc0d55ae2f0c / . / inst / reveal.js-4.1.2 / examples / auto-animate.html
blob: e22247562d499f4471297d3e0093fbf7fce41430 [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame^]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js - Auto Animate</title>
8
9 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10
11 <link rel="stylesheet" href="../dist/reveal.css">
12 <link rel="stylesheet" href="../dist/theme/black.css" id="theme">
13 <link rel="stylesheet" href="../plugin/highlight/monokai.css">
14 </head>
15
16 <body>
17
18 <div class="reveal">
19
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;">Line Height & Letter Spacing</p>
46 </section>
47 <section data-auto-animate>
48 <p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
49 </section>
50
51 <section>
52 <section data-auto-animate>
53 <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
54 import React, { useState } from 'react';
55
56 function Example() {
57 const [count, setCount] = useState(0);
58
59 return (
60 ...
61 );
62 }
63 </code></pre>
64 </section>
65 <section data-auto-animate>
66 <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
67 function Example() {
68 const [count, setCount] = useState(0);
69
70 return (
71 &lt;div&gt;
72 &lt;p&gt;You clicked {count} times&lt;/p&gt;
73 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
74 Click me
75 &lt;/button&gt;
76 &lt;/div&gt;
77 );
78 }
79 </code></pre>
80 </section>
81 <section data-auto-animate>
82 <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
83 function Example() {
84 // A comment!
85 const [count, setCount] = useState(0);
86
87 return (
88 &lt;div&gt;
89 &lt;p&gt;You clicked {count} times&lt;/p&gt;
90 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
91 Click me
92 &lt;/button&gt;
93 &lt;/div&gt;
94 );
95 }
96 </code></pre>
97 </section>
98 </section>
99
100 <section>
101 <section data-auto-animate>
102 <h3>Swapping list items</h3>
103 <ul>
104 <li>One</li>
105 <li>Two</li>
106 <li>Three</li>
107 </ul>
108 </section>
109 <section data-auto-animate>
110 <h3>Swapping list items</h3>
111 <ul>
112 <li>Two</li>
113 <li>One</li>
114 <li>Three</li>
115 </ul>
116 </section>
117 <section data-auto-animate>
118 <h3>Swapping list items</h3>
119 <ul>
120 <li>Two</li>
121 <li>Three</li>
122 <li>One</li>
123 </ul>
124 </section>
125 </section>
126
127 <section data-auto-animate style="height: 600px">
128 <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h2>
129 <h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>
130 <div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div>
131 <div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
132 <div data-id="3" style="background: white; position: absolute; top: 150px; left: 56%; width: 60px; height: 60px;"></div>
133 <div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
134 </section>
135 <section data-auto-animate style="height: 600px">
136 <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h2>
137 <h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2>
138 <div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div>
139 <div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
140 <div data-id="3" style="background: yellow; position: absolute; bottom: 190px; left: 56%; width: 60px; height: 260px;"></div>
141 <div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
142 </section>
143 <section data-auto-animate style="height: 600px">
144 <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
145 <h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
146 <div data-id="1" style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;"></div>
147 <div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div>
148 <div data-id="3" style="background: yellow; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;"></div>
149 <div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div>
150 </section>
151 <section data-auto-animate style="height: 600px">
152 <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
153 <h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
154 <div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div>
155 <div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
156 <div data-id="3" style="background: magenta; position: absolute; top: 250px; left: 56%; width: 60px; height: 60px;"></div>
157 <div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
158 </section>
159
160 <section data-auto-animate data-auto-animate-id="a">
161 <h2>data-auto-animate-id="a"</h2>
162 <h3>A1</h3>
163 </section>
164 <section data-auto-animate data-auto-animate-id="a">
165 <h2>data-auto-animate-id="a"</h2>
166 <h3>A1</h3>
167 <h3>A2</h3>
168 </section>
169 <section data-auto-animate data-auto-animate-id="b">
170 <h2>data-auto-animate-id="b"</h2>
171 <h3>B1</h3>
172 </section>
173 <section data-auto-animate data-auto-animate-id="b">
174 <h2>data-auto-animate-id="b"</h2>
175 <h3>B1</h3>
176 <h3>B2</h3>
177 </section>
178
179 </div>
180
181 </div>
182
183 <script src="../dist/reveal.js"></script>
184 <script src="../plugin/highlight/highlight.js"></script>
185 <script>
186 Reveal.initialize({
187 center: true,
188 hash: true,
189 plugins: [ RevealHighlight ]
190 });
191 </script>
192
193 </body>
194</html>