Newer
Older
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Auto Animate</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-auto-animate data-auto-animate-unmatched="fade">
<p>This will fade out</p>
<img src="assets/image1.png" style="height: 100px;">
Hakim El Hattab
a validé
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() {
const [count, setCount] = useState(0);
}
<section data-auto-animate data-auto-animate-unmatched="fade">
<p style="opacity: 0.2; margin-top: 100px;">This will fade out</p>
<p>This element is unmatched</p>
<img src="assets/image1.png" style="height: 150px;">
Hakim El Hattab
a validé
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
Hakim El Hattab
a validé
New line!
const [count, setCount] = useState(0);
}
</section>
<section data-auto-animate>
<p data-id="text-props" style="background: #555; line-height: 1em; letter-spacing: 0em;">Line Height & Letter Spacing</p>
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
<section>
<section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
import React, { useState } from 'react';
Hakim El Hattab
a validé
function Example() {
const [count, setCount] = useState(0);
Hakim El Hattab
a validé
return (
...
);
}
</code></pre>
</section>
<section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() {
const [count, setCount] = useState(0);
Hakim El Hattab
a validé
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
</code></pre>
</section>
<section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() {
// A comment!
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
</code></pre>
</section>
Hakim El Hattab
a validé
</section>
<section>
<section data-auto-animate>
<h3>Swapping list items</h3>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</section>
<section data-auto-animate>
<h3>Swapping list items</h3>
<ul>
<li>Two</li>
<li>One</li>
<li>Three</li>
</ul>
</section>
<section data-auto-animate>
<h3>Swapping list items</h3>
<ul>
<li>Two</li>
<li>Three</li>
<li>One</li>
</ul>
</section>
<section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h3>
<h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>
<div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div>
<div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
<div data-id="3" style="background: white; position: absolute; top: 150px; left: 56%; width: 60px; height: 60px;"></div>
<div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
</section>
<section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h3>
<h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2>
<div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div>
<div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
<div data-id="3" style="background: yellow; position: absolute; bottom: 190px; left: 56%; width: 60px; height: 260px;"></div>
<div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
</section>
<section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
<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>
<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>
<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>
<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>
</section>
<section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
<div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div>
<div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
<div data-id="3" style="background: magenta; position: absolute; top: 250px; left: 56%; width: 60px; height: 60px;"></div>
<div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
</section>
<section data-auto-animate data-auto-animate-id="a">
<h2>data-auto-animate-id="a"</h2>
<h3>A1</h3>
</section>
<section data-auto-animate data-auto-animate-id="a">
<h2>data-auto-animate-id="a"</h2>
<h3>A1</h3>
<h3>A2</h3>
</section>
<section data-auto-animate data-auto-animate-id="b">
<h2>data-auto-animate-id="b"</h2>
<h3>B1</h3>
</section>
<section data-auto-animate data-auto-animate-id="b">
<h2>data-auto-animate-id="b"</h2>
<h3>B1</h3>
<h3>B2</h3>
</section>
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<section>
<section id="stacked-slide-1" data-auto-animate>
<a href="#/stacked-slide-1">Slide 1</a><br>
<a href="#/stacked-slide-2">Slide 2</a><br>
<a href="#/stacked-slide-3">Slide 3</a><br>
<a href="#/stacked-slide-4">Slide 4</a><br>
<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 0px;">A</div>
</section>
<section id="stacked-slide-2" data-auto-animate>
<a href="#/stacked-slide-1">Slide 1</a><br>
<a href="#/stacked-slide-2">Slide 2</a><br>
<a href="#/stacked-slide-3">Slide 3</a><br>
<a href="#/stacked-slide-4">Slide 4</a><br>
<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 25%;">A</div>
</section>
<section id="stacked-slide-3" data-auto-animate>
<a href="#/stacked-slide-1">Slide 1</a><br>
<a href="#/stacked-slide-2">Slide 2</a><br>
<a href="#/stacked-slide-3">Slide 3</a><br>
<a href="#/stacked-slide-4">Slide 4</a><br>
<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 50%;">A</div>
</section>
<section id="stacked-slide-4" data-auto-animate>
<a href="#/stacked-slide-1">Slide 1</a><br>
<a href="#/stacked-slide-2">Slide 2</a><br>
<a href="#/stacked-slide-3">Slide 3</a><br>
<a href="#/stacked-slide-4">Slide 4</a><br>
<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 75%;">A</div>
</section>
</section>
<script src="../dist/reveal.js"></script>
<script src="../plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
center: true,
hash: true,
plugins: [ RevealHighlight ]
});
</script>
</body>
</html>