-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo7_para_scroll.html
63 lines (63 loc) · 2.74 KB
/
demo7_para_scroll.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parallax Scrolling 1</title>
<link rel="stylesheet" href="static/css/jarallax.css">
<link rel="stylesheet" href="static/css/para_scroll.css">
</head>
<body>
<section>
<div class="box">
<h2 data-jarallax-element="0 -200">Awesome Parallax Scrolling</h2>
<div class="container">
<div class="img_box jarallax" >
<img src="static/img/NewYork.jpg" class="jarallax-img">
</div>
<div class="content" data-jarallax-element="-200 0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="box">
<h2 data-jarallax-element="-200 0">Awesome Parallax Scrolling</h2>
<div class="container">
<div class="img_box jarallax" >
<img src="static/img/NewYork.jpg" class="jarallax-img">
</div>
<div class="content" data-jarallax-element="0 -200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="box">
<h2 data-jarallax-element="0 -200">Awesome Parallax Scrolling</h2>
<div class="container">
<div class="img_box jarallax" >
<img src="static/img/NewYork.jpg" class="jarallax-img">
</div>
<div class="content" data-jarallax-element="-200 0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<script src="static/js/jarallax.js"></script>
<script src="static/js/jarallax-element.js"></script>
<script type="text/javascript">
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.5
});
</script>
</body>
</html>