vanillaJsuParallax/index.html at master · JavaScriptUtilities/vanillaJsuParallax · GitHub

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
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<title>Vanilla JSU Parallax</title>
<link rel="stylesheet" type="text/css" href="css/demo.css?v=0.4.4" />
<script src="js/vanilla-jsuparallax.js?v=0.4.4"></script>
</head>
<body>
<div>
    <span class="circle circle1"><span></span></span>
</div>
<div>
    <span class="circle circle1"><span></span></span>
    <span class="circle circle2" data-jsuplxdir="bottom"><span></span></span>
</div>
<div>
    <span class="circle circle1" data-jsuplxperspective="100"><span></span></span>
    <span class="circle circle1" data-jsuplxperspective="200"><span></span></span>
    <span class="circle circle1" data-jsuplxperspective="300"><span></span></span>
</div>
<div>
    <span class="circle circle1"><span></span></span>
    <span class="circle circle2" data-jsuplxdir="bottom"><span></span></span>
</div>
<div style="overflow:hidden;">
    <span class="circle circle2" data-jsuplxmode="horizontal" data-jsuplxperspective="1000"><span></span></span>
</div>
<div>
    <span class="circle circle1"><span></span></span>
</div>
<div>
    <span class="circle circle1"><span></span></span>
    <span class="circle circle2" data-jsuplxdir="bottom"><span></span></span>
</div>

<script>
new vanillaJsuParallax({
    items: document.querySelectorAll('.circle1, .circle2')
});
</script>
</body>
</html>