-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
436 lines (416 loc) · 18.1 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VagaJS - Simple animations on scroll</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<main>
<header class="vhead">
<div class="vhead__inner">
<a href="#intro" class="vhead__link">•</a>
<a href="#example" class="vhead__link">Examples</a>
<a href="#getting-started" class="vhead__link">Getting started</a>
<a href="#docs" class="vhead__link">Documentation</a>
<a href="#customizing" class="vhead__link">Customizing</a>
</div>
</header>
<section id="intro" class="vhero">
<div class="vhero__inner">
<div class="vhero__claim">
<h1 class="title title-0 vhero__claim__title">
VagaJS
</h1>
<h2 class="title title-3 vhero__claim__subtitle">
A simple and straightforward animation library to enable CSS based animations on scroll, as soon as the elements become visible by the user.
</h2>
</div>
<div class="vhero__info">
<p class="text text-s mar-b-0">
<code>npm install vagajs</code>
<br>
<code>import * as vaga from "vagajs/build/vaga.min.js";</code>
<br>
<code>import "vagajs/build/vaga.min.css"; //or import it in your CSS workflow</code>
<br>
<code>vaga.start();</code>
</p>
</div>
</div>
</section>
<section id="example" class="vblocks">
<div class="vblocks__inner">
<div class="vblocks__content">
<h3 class="title title-2 vblocks__title">
IntersectionObserver + CSS
</h3>
<p class="text text-m">
Simple yet modern: using the IntersectionObserver API and CSS transitions to
make a set of animations for your web projects, all you've to do is to simply add
CSS classes to the target elements you want to animate.
</p>
</div>
<div class="vblocks__group">
<div class="vblocks__box vaga-fade-left vaga-delay-1 vaga-will">
Fade left
</div>
<div class="vblocks__box vaga-fade-in vaga-delay-2 vaga-will">
Fade in, with some delay
</div>
<div
class="vblocks__box vblocks__box--alt vaga-delay-0-5 vaga-move-left vaga-will">
Move left
</div>
<div class="vblocks__box vblocks__box--off vaga-delay-3 vaga-opacity vaga-will">
Opacity
</div>
<div class="vblocks__box vblocks__box--alt vaga-delay-4-5 vaga-move-in vaga-will">
Move in, with even more delay
</div>
</div>
</div>
</section>
<section id="getting-started" class="vdoc">
<div class="vdoc__inner">
<div class="vdoc__content">
<h3 class="title title-2">
Getting started
</h3>
<p class="text text-m">
Install VagaJS via a packet manager, such as npm:
<br>
<code>npm install vagajs</code>
<br>
Then import it as a module in your javascript build:
<br>
<code>import * as vaga from "vagajs/build/vaga.min.js";</code>
<br>
<code>import "vagajs/build/vaga.min.css"; //or add it in your CSS workflow</code>
<br>
Now to run it simply start VagaJS somewhere in your javascript build:
<br>
<code>vaga.start();</code>
</p>
<p class="text text-m">
VagaJS can work by simply adding its CSS classes on HTML elements once you've installed, imported it in your web project and started it.
<br>
Let's say you want to play a fade in animation on an element, here's how it works:
<br>
<code><div class="vaga-fade-in">Hello there!</div></code>
<br>
Here's how the VagaJS CSS classes work:
<code>.vaga-<property>-<direction></code>
<br>
<strong>property</strong>: there are currently 3 properties, which are fade, move and opacity.
<br>
<strong>direction</strong>: there are 4 directions, which are in, out, left and right. (The opacity property has no directions!)
</p>
</div>
</div>
</section>
<section id="docs" class="vb">
<div class="vb__inner">
<div class="vb__entry">
<h3 class="title title-2">Documentation</h3>
</div>
<div class="vb__subentry">
<h4 class="title title-3">Animation classes</h4>
</div>
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Fade in</h5>
<p class="text text-s">
Add the <code>.vaga-fade-in</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-fade-in"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-fade-in vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Fade out</h5>
<p class="text text-s">
Add the <code>.vaga-fade-out</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-fade-out"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-fade-out vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Fade left</h5>
<p class="text text-s">
Add the <code>.vaga-fade-left</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-fade-left"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-fade-left vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Fade right</h5>
<p class="text text-s">
Add the <code>.vaga-fade-right</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-fade-right"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-fade-right vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Move in</h5>
<p class="text text-s">
Add the <code>.vaga-move-in</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-move-in"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-move-in vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Move out</h5>
<p class="text text-s">
Add the <code>.vaga-move-out</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-move-out"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-move-out vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Move left</h5>
<p class="text text-s">
Add the <code>.vaga-move-left</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-move-left"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-move-left vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Move right</h5>
<p class="text text-s">
Add the <code>.vaga-move-right</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-move-right"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-move-right vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">Opacity</h5>
<p class="text text-s">
Add the <code>.vaga-opacity</code> CSS class to the HTML element.
<br>
example: <code><div class="vaga-opacity"></div></code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-opacity vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__subentry">
<h4 class="title title-3">Custom length/size</h4>
</div>
<div class="vb__row">
<div class="vb__info">
<p class="text text-s">
<code>data-vsize="60"</code>
<br>
Both <strong>fade</strong> and <strong>move</strong> animations have a default transform length of 40px (20px on mobile),
to customize this option you need to add a <strong>dataset</strong> with <strong>vsize</strong>
as the datataset property and an integer number as the value.
<br>
example: <code><div class="vaga-move-right" data-vsize="60"></div></code>
<br>
This will make the element move from a starting point of 60px instead of 40px, which will be half of that value in mobile (30px).
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-move-right vaga-delay-3" data-vsize="60"></div>
</div>
</div><!--/row-->
<div class="vb__subentry">
<h4 class="title title-3">Util classes</h4>
</div>
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">
Responsive util
</h5>
<p class="text text-s">
<code>.vaga-fade-in--<breakpoint></code>
<br>
By adding <code>--md</code> or <code>--lg</code> to the vaga animations you're going to make them responsive,
like <code>.vaga-move-right--lg</code> is going to move the element only on large devices such as desktops.
</p>
<p class="text text-s">
Want to have a fade-in on an element when it's viewed in a mobile device and then replacing that animation with a fade-left when viewed on bigger viewports?
<br>
<code>
<div class="vaga-fade-in vaga-fade-left--md">Responsive fades</div>
</code>
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-fade-in vaga-fade-left--md vaga-delay-3"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">
Delay util
</h5>
<p class="text text-s">
<code>.vaga-delay-<value></code>
<br>
Sometimes you want to have a bit of delay between animations, and for this issue VagaJS comes with a delay util.
<br>
This util will apply a delay based on its value, where the values are 1, 2, 3 and 4.
<br>
<code>.vaga-delay-0-5</code> - will apply a delay of duration * 0.5. duration is an option, and its default is 0.375s, so this util will apply a delay of half of that value.
<br>
<code>.vaga-delay-1</code> - will apply a delay of duration * 1 (which would be 0.375s).
<br>
<code>.vaga-delay-1-5</code> - will apply a delay of duration * 1.5 (which would be 0.375s * 1.5).
<br>
<code>.vaga-delay-2</code> - will apply a delay of duration * 2 (which would be 0.375s * 2).
<br>
And so on, up to <code>.vaga-delay-6</code>, which is duration * 6.
</p>
</div>
<div class="vb__example">
<div class="vb__box vaga-fade-left vaga-delay-5"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">
Unload util
</h5>
<p class="text text-s">
<code>.vaga-unload</code>
<br>
To unload animations after the element is no longer visible.
</p>
</div>
<div class="vb__example mar-b-2">
<div class="vb__box vaga-fade-in vaga-delay-3 vaga-unload"></div>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">
Will-change (perfomance) util
</h5>
<p class="text text-s">
<code>.vaga-will</code> - applies will-change: transform; for smoother animations
</p>
</div>
</div><!--/row-->
<div class="vb__row">
<div class="vb__info">
<h5 class="title title-4">
Blocking animations until window is loaded
</h5>
<p class="text text-s">
<code>.vaga-block</code> - trick to have smooth animations and transitions only when the window is loaded, add this to the parent/grandparent element such as the body.
</p>
</div>
</div><!--/row-->
</div>
</section>
<section id="customizing" class="vc">
<div class="vc__inner">
<h3 class="title title-2">Customizing VagaJS</h3>
<p class="text text-m">
VagaJS has a set of default options to make it work right off the bat, however you can customize the options easily.
<br>
Here are VagaJS' default options:
</p>
<ul>
<li>
<p class="text text-s">
<code>root</code> - default value is null, this is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters" target="_blank" rel="noopener noreferrer">IntersectionObserver's parameter</a>.
</p>
</li>
<li>
<p class="text text-s">
<code>rootMargin</code> - default value is 0px, this is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters" target="_blank" rel="noopener noreferrer">IntersectionObserver's parameter</a>.
</p>
</li>
<li>
<p class="text text-s">
<code>threshold</code> - default value is 0.25 (max value is 1), this is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters" target="_blank" rel="noopener noreferrer">IntersectionObserver's parameter</a>.
</p>
</li>
<li>
<p class="text text-s">
<code>targets</code> - default value is <code>document.querySelectorAll("[class*='vaga-'")</code>, this is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters" target="_blank" rel="noopener noreferrer">IntersectionObserver's parameter</a>.
</p>
</li>
<li>
<p class="text text-s">
<code>duration</code> - default is 0.375s, CSS transition-duration.
</p>
</li>
<li>
<p class="text text-s">
<code>timingFunction</code> - default is ease-in, CSS transition-timing-function (can accept cubic-bezier() functions).
</p>
</li>
</ul>
<p class="text text-m">
To customize these options, simply do like this:
<br>
<code class="multiline">
var options = {
threshold: 0.15,
duration: 0.75,
timingFunction: "linear"
};
vaga.start(options)
</code>
</p>
</div>
</section>
<footer class="vfoot">
<div class="vfoot__inner">
<p class="text text-s">
Copyright (c) 2023 Lotrèk - Vaga is licensed under the MIT License.
</p>
</div>
</footer>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>