forked from Martinomagnifico/reveal.js-appearance
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
114 lines (111 loc) · 7.12 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Appearance for Reveal.js</title>
<meta name="description" content="">
<meta name="author" content="Martinomagnifico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/black.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" href="plugin/appearance/appearance.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="center">
<h1 class="animated flipInX slow">Appearance</h1>
<h3 class="animated flipInX slow" data-delay="700">for Reveal.js</h3>
</section>
<section class="center"><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. It's easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small><br><br><small>We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Reveal versions lower than 4 have no "slidetransitionend" event, so we need the Transit.js plugin that handles that.</small>
<p>Let's check out what appearance.js does:</p>
</section>
<section class="center">
<h3>Let text appear</h3>
<ul>
<li class="animated bounceInLeft">Add it to any text element</li>
<li class="animated bounceInLeft">Like list items, or headers.</li>
<li class="animated bounceInLeft">It adds some impact.</li>
</ul>
</section>
<section class="center">
<h3>Let images appear</h3>
<div class="padded"><img class="animated flipInX" data-src="img/1.jpg"></div>
<div class="padded"><img class="animated flipInX" data-src="img/2.jpg"></div>
<div class="padded"><img class="animated flipInX" data-src="img/3.jpg"></div>
<div class="padded"><img class="animated flipInX" data-src="img/4.jpg"></div>
<div class="padded"><img class="animated flipInX" data-src="img/5.jpg"></div>
</section>
<section class="center">
<h3>Change the delay</h3><small>Use data-delay="*" on each element, where the wildcard is the delay in microseconds</small>
<div class="padded"><img class="animated fadeInDown" data-src="img/1.jpg" data-delay="200"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/2.jpg" data-delay="160"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/3.jpg" data-delay="120"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/4.jpg" data-delay="80"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/5.jpg" data-delay="40"></div>
</section>
<section>
<section class="center">
<h3>Change the animation speed</h3><small>Use the speed classes from Animate.css to change the speed of the animation:</small>
<div class="padded"><img class="animated bounceIn slower" data-src="img/1.jpg"><br><small>slower</small></div>
<div class="padded"><img class="animated bounceIn slow" data-src="img/2.jpg"><br><small>slow</small></div>
<div class="padded"><img class="animated bounceIn" data-src="img/3.jpg"><br><small></small></div>
<div class="padded"><img class="animated bounceIn fast" data-src="img/4.jpg"><br><small>fast</small></div>
<div class="padded"><img class="animated bounceIn faster" data-src="img/5.jpg"><br><small>faster</small></div>
</section>
<section class="center">
<h3>Inside fragments</h3>
<p class="animated fadeIn">Like this <span class="animated fadeInDown faster" style="font-size: .8em">(click next)</span>:</p>
<div class="fragment">
<div class="padded"><img class="animated fadeInDown" data-src="img/1.jpg"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/2.jpg"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/3.jpg"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/4.jpg"></div>
<div class="padded"><img class="animated fadeInDown" data-src="img/5.jpg"></div>
</div>
</section>
</section>
<section class="center" data-transition="convex-in fade-out">
<h3>Additional animations:</h3>
<ul>
<li class="animated skidLeft" data-delay="300">Appear with .skidLeft</li>
<li class="animated skidLeftBig" data-delay="1000">Appear with .skidLeftBig</li>
<li class="animated skidRight" data-delay="1000">Appear with .skidRight</li>
<li class="animated skidRightBig" data-delay="1000">Appear with .skidRightBig</li>
<li class="animated shrinkIn" data-delay="1000">Appear with .shrinkIn</li>
<li class="animated shrinkInBlur" data-delay="1000">Appear with .shrinkInBlur</li>
</ul>
</section>
<section class="center" data-transition="fade-in">
<h3>Thanks</h3>
<ul>
<li class="animated bounceInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
<li class="animated bounceInLeft">Daniel Eden for <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
<li class="animated bounceInLeft">David Marby & Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
</ul>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
<script src="plugin/appearance/appearance.js"></script>
<script>
Reveal.initialize({
transition: "convex",
history: true,
appearance: {
baseclass: "animated",
visibleclass: "in",
hideagain: true,
delay: 300
},
plugins: [
Appearance
]
});
</script>
</body>
</html>