-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
36 lines (35 loc) · 3.63 KB
/
index.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
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<title>Vanilla Animate Words</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/vanilla-animate-words.css?v=0.5.1" />
<script src="js/vanilla-animate-words.min.js?v=0.5.1"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<h1>Vanilla Animate Words</h1>
<p>A Script To Beautifully Animate Words, helped by CSS</p>
<h2>Fade-in words</h2>
<p data-vawjs-anim="fadein"><strong class="boop">Here’s</strong> to the crazy ones.<br />The <strong>misfits.</strong> The rebels. <strong>The troublemakers.</strong> The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as <em>the crazy ones,</em> we see genius. Because the people who are crazy enough to think they can change the world are the ones who do.</p>
<h2>Slide-up words</h2>
<p data-vawjs-anim="slideup">
<strong class="boop">Here’s</strong> to the crazy ones.<br /> The <strong>misfits.</strong> The rebels. <strong>The troublemakers.</strong> The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as <em>the crazy ones,</em> we see genius. Because the people who are crazy enough to think they can change the world are the ones who do.
</p>
<h2>Slide-up lines</h2>
<p data-vawjs-anim="slideup" data-vawjs-lines="1" data-vawjs-delay="150">
<strong class="boop">Here’s</strong> to the crazy ones.<br /> The <strong>misfits.</strong> The rebels. <strong>The troublemakers.</strong> The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as <em>the crazy ones,</em> we see genius. Because the people who are crazy enough to think they can change the world are the ones who do.
</p>
<h2>Slow slide-up words</h2>
<p data-vawjs-delay="150" data-vawjs-anim="slideup">The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do — Sarah Ban Breathnach.</p>
<h2>How to trigger</h2>
<div class="script-visible"><p data-vawjs-anim="fadein">Here’s to the crazy ones.</p>
<p data-vawjs-anim="slideup">Here’s to the crazy ones.</p>
<p data-vawjs-anim="slideup" data-vawjs-delay="150" data-vawjs-lines="lines">Here’s to ...</p>
<p data-vawjs-delay="150" data-vawjs-anim="slideup">Here’s to ...</p> </div>
<script class="script-visible" autocorrect="off" contenteditable>document.querySelectorAll("[data-vawjs-anim]").forEach(function($item) {
new vanillaAnimateWords($item);
});</script>
</body>
</html>