mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-08-14 02:24:13 +02:00
fix and format examples decks
This commit is contained in:
Hakim El Hattab
@@ -1,27 +1,27 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<h3>Auto-Animate Example</h3>
|
||||
<p>This will fade out</p>
|
||||
<img src="assets/image1.png" style="height: 100px;">
|
||||
<img src="assets/image1.png" style="height: 100px" />
|
||||
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
|
||||
function Example() {
|
||||
const [count, setCount] = useState(0);
|
||||
@@ -30,9 +30,9 @@
|
||||
</section>
|
||||
<section data-auto-animate data-auto-animate-unmatched="fade">
|
||||
<h3>Auto-Animate Example</h3>
|
||||
<p style="opacity: 0.2; margin-top: 100px;">This will fade out</p>
|
||||
<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;">
|
||||
<img src="assets/image1.png" style="height: 150px" />
|
||||
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
|
||||
function Example() {
|
||||
New line!
|
||||
@@ -42,10 +42,14 @@
|
||||
</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: 1em; letter-spacing: 0em">
|
||||
Line Height & Letter Spacing
|
||||
</p>
|
||||
</section>
|
||||
<section data-auto-animate>
|
||||
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">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>
|
||||
@@ -125,36 +129,204 @@
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
@@ -178,48 +350,93 @@
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../dist/reveal.js"></script>
|
||||
<script src="../plugin/highlight/highlight.js"></script>
|
||||
<script src="../dist/plugin/highlight.js"></script>
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
center: true,
|
||||
hash: true,
|
||||
plugins: [ RevealHighlight ]
|
||||
plugins: [RevealHighlight],
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user