-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanimation.html
38 lines (34 loc) · 2.86 KB
/
animation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM Playground</title>
<link rel="stylesheet" href="animation-styles.css">
</head>
<body>
<button class="btn">Animate</button>
<div class="wrapper">
<div class="box"></div>
</div>
<div class="btn-block">
<button class="first">Go!</button>
<button>No</button>
<button>No</button>
<button>No</button>
<button>No</button>
<button>No</button>
<button>No</button>
<button>No</button>
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis laudantium nisi quos tempora corporis ullam eius molestias atque non aspernatur voluptates, eos ipsum, rem perspiciatis consequatur dolorum unde cupiditate vitae et! Molestiae, labore! Sequi dignissimos voluptatibus totam, voluptate sunt inventore. Doloremque ipsam ratione vel soluta sint expedita beatae eaque laboriosam? Sapiente et fugit in, ut cupiditate repellat provident labore consectetur officiis nostrum similique voluptates autem amet natus illo doloremque deserunt cumque quae ipsum facere? Cupiditate voluptates ex dicta sequi nesciunt distinctio soluta fugiat dolorum officia ut nulla ea placeat, consectetur animi, et explicabo numquam aperiam similique ad quaerat. Eos tempora aspernatur, quasi sed reiciendis exercitationem? Ex aliquid in quas sint quis tenetur doloremque numquam. Vitae hic nemo rem, mollitia ea unde? Modi cum ratione distinctio perspiciatis obcaecati voluptatem quia et eius esse aut eum eveniet, saepe nihil quam maxime, perferendis dolorum itaque alias architecto, ipsam blanditiis porro aspernatur. Laboriosam laborum facilis, temporibus eaque officiis optio inventore ipsum reiciendis nesciunt voluptas laudantium harum neque. Earum dolore veniam culpa nesciunt ut nam sint veritatis impedit, asperiores optio ex corrupti deleniti placeat soluta, nobis ad, provident natus possimus vel porro vitae iusto. Rem consectetur nobis rerum, fugiat corporis sapiente architecto dolore eius, distinctio saepe veniam eum. Pariatur earum beatae alias nulla excepturi ipsa itaque, deserunt minima reprehenderit, accusantium fuga iste ipsam placeat molestias, iure aut officiis nobis totam autem repellat obcaecati velit. Fugit tempore placeat incidunt dolores soluta veritatis totam vero in sequi velit deserunt, dicta ratione commodi quibusdam maiores dolorem unde numquam.</div>
<div class="btn-text">
<button class="textLeft">How far?</button>
<button class="textButton">Show all</button>
<button class="textTopText">Go on Top</button>
<button class="textTopPage">Go to the very Top</button>
</div>
<script src="animation-script.js"></script>
</body>
</html>