-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (72 loc) · 4.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moon Light</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<!-- Navigation Bar -->
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#" class="active"> Home</a></li>
<li><a href="#"> About</a></li>
<li><a href="#">Work </a></li>
<li><a href="#"> Contact</a></li>
</ul>
</header>
<section>
<img src="stars.png" id="stars">
<img src="moon.png" id="moon">
<img src="mountains_behind.png" id="mountains_behind">
<h2 id="text">
Moon Light
</h2>
<a href="#sec" id="btn">
Explore
</a>
<img src="mountains_front.png" id="mountains_front">
</section>
<!-- paragraph -->
<div class="sec" id="sec">
<h2> Parallax Scrolling Effects</h2>
<p >
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti. <br><br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti. <br><br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti. <br><br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti. <br><br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime architecto nesciunt explicabo dolores ullam laudantium dignissimos. Esse dolorem consequuntur
enim consequatur quasi itaque? Officiis commodi facere consectetur dolorum. Ullam, deleniti. <br><br>
</p>
</div>
<script>
let stars = document.getElementById('stars');
let moon = document.getElementById('moon');
let mountains_behind = document.getElementById('mountains_behind');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let mountains_front = document.getElementById('mountains_front');
let header = document.querySelector('header')
window.addEventListener('scroll',function(){
let value =window.scrollY;
stars.style.left = value * 0.25 + 'px';
moon.style.top = value * 1 + 'px';
mountains_behind.style.top = value * 0.5 + 'px';
mountains_front.style.top = value * 0 + 'px';
text.style.marginRight = value * 4 + 'px';
text.style.marginTop = value * 1.5 + 'px';
text.style.marginTop = value * 1.5 + 'px';
header.style.top = value * 0.5 + 'px';
})
</script>
</body>
</html>