/
index.html
149 lines (148 loc) · 6.51 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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./main.js" type="module"></script>
<link rel="stylesheet" href="./js-css-animations/js-animations.css" />
<link rel="stylesheet" href="style.css" />
<title>JS Animations</title>
</head>
<body>
<main>
<div class="container">
<h1>Js-Css-Animations</h1>
<section>
<h2>Slide Animations</h2>
<div>
<p class="delay-counter"></p>
</div>
<div id="content" class="content">
<button class="btn--slide-up" target-selector=".p1">Up</button>
<button class="btn--slide-right" target-selector=".p2">
Right
</button>
<button class="btn--slide-down" target-selector=".p1, .p2">
Down
</button>
<button class="btn--slide-left" target-selector=".p1, .p2">
Left
</button>
<a id="anchor" href="#" class="my-custom-btn"
><img src="./img/arrows.png" alt="toggle area"
/></a>
<a
id="anchor2"
href="#"
class="js-anim--trigger"
target-selector=".content p:nth-child(1)"
><img src="./img/arrows.png" alt="toggle area"
/></a>
<div id="parent" class="">
<div class="div1">
<p class="p1">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis ipsam nisi in excepturi, dignissimos molestiae,
inventore odio natus totam esse et? Minus quaerat libero ad
aut saepe. Laboriosam, consectetur laudantium incidunt
explicabo accusamus iure amet qui, optio suscipit vel
dignissimos, saepe voluptatem repellat corporis! Magni
repudiandae, possimus facilis deserunt similique eum harum hic
incidunt voluptas, placeat nisi cum dolorem in?
</p>
</div>
<div class="div2">
<p class="p2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro nisi iure molestias voluptatibus. Laborum nesciunt,
totam optio perspiciatis facilis officia itaque aliquam eius
eveniet rerum neque error commodi nostrum esse! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Qui id ducimus
atque velit et laboriosam totam. Voluptatibus eos sint nam
libero pariatur laudantium doloribus itaque laboriosam quos
tenetur, dolorem magni nostrum odio voluptatum cumque quas,
porro, excepturi adipisci nesciunt! Assumenda?
</p>
</div>
</div>
</div>
</section>
<section>
<h2>Collapse / Expand</h2>
<button class="collapse-expand--btn">Click to toggle</button>
<div class="box">
<p class="collapse-expand--p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Excepturi optio impedit voluptate inventore sint corporis quia
fugiat est, at ex dicta quam. Quo dolorem, nemo odit facere, unde
esse sunt vel quasi, laborum nihil tempore reprehenderit ducimus
laudantium eligendi nostrum ipsum tenetur illum? Ut, dolor.
</p>
</div>
<button class="collapse-expand--btn__mult">
Click to toggle both columns
</button>
<div class="collapse-expand--wrapper row box">
<div class="col">
<p class="collapse-expand--p__mult">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta
repudiandae amet doloremque ab deserunt quis officia culpa
debitis quos est corporis ipsum accusamus illum et cupiditate,
alias nulla incidunt? Autem ratione reprehenderit, officiis
repellat adipisci delectus voluptate doloremque dicta earum
laudantium eligendi, cumque quaerat, incidunt veritatis! Earum
velit cum tenetur labore excepturi, error dicta libero. Rem odit
perspiciatis magni quia!
</p>
</div>
<div class="col">
<p class="collapse-expand--p__mult">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta
repudiandae amet doloremque ab deserunt quis officia culpa
debitis quos est corporis ipsum accusamus illum et cupiditate,
alias nulla incidunt? Autem ratione reprehenderit, officiis
repellat adipisci delectus voluptate doloremque dicta earum
laudantium eligendi, cumque quaerat, incidunt veritatis! Earum
velit cum tenetur labore excepturi, error dicta libero. Rem odit
perspiciatis magni quia!
</p>
</div>
</div>
</section>
<section>
<h2>Fade In / Fade Out</h2>
<button class="fade--btn" target-selector=".fade--p">Fade</button>
<div>
<p class="fade--p">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ut
reprehenderit doloremque. Dolorum placeat tempore similique, rerum
cum voluptates, delectus consectetur deleniti excepturi veritatis
quisquam fugit numquam magni debitis ullam error sapiente quam
dignissimos, iste adipisci dolores in! Sequi repudiandae quasi
sed, veniam cumque inventore hic maiores, maxime rem in delectus,
molestias consequatur quisquam est. At inventore quas cupiditate
vitae!
</p>
</div>
</section>
<section>
<h2>Rotations</h2>
<label for="rotation-angle"
>Rotation angle in degrees
<input
type="text"
value="0"
pattern="-?(\d+\.\d+|\d+)"
name="rotation-angle"
id="rotation-angle"
/></label>
<p class="rotation--input-error" style="display: none"></p>
<div class="rotation-area">
<p class="rotation-area--text">↑</p>
</div>
</section>
</div>
</main>
</body>
</html>