-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (65 loc) · 21.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<a href="#" class="logo">Verticall</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>
<div class="sec" id="sec">
<h2>Parallex scrolling effects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus in hac habitasse platea dictumst vestibulum. Eget arcu dictum varius duis at consectetur lorem donec. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. In fermentum posuere urna nec tincidunt praesent. Amet mauris commodo quis imperdiet massa. Scelerisque purus semper eget duis at tellus. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Id consectetur purus ut faucibus pulvinar elementum integer enim. Amet porttitor eget dolor morbi non arcu risus. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Ultrices eros in cursus turpis. Venenatis urna cursus eget nunc. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Felis eget velit aliquet sagittis id consectetur purus ut.
Nam libero justo laoreet sit amet cursus sit amet dictum. Fames ac turpis egestas integer. Nunc congue nisi vitae suscipit tellus mauris. Id diam maecenas ultricies mi eget. Purus sit amet volutpat consequat. Egestas pretium aenean pharetra magna ac. Viverra mauris in aliquam sem. Tellus mauris a diam maecenas sed enim ut sem viverra. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Pellentesque id nibh tortor id aliquet. Lacus luctus accumsan tortor posuere ac ut. Nibh sed pulvinar proin gravida hendrerit lectus a. Nisl nisi scelerisque eu ultrices vitae auctor eu. At auctor urna nunc id cursus metus aliquam eleifend. Proin sed libero enim sed faucibus turpis in.
Ultricies integer quis auctor elit sed vulputate mi sit amet. Quam quisque id diam vel quam elementum pulvinar. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Amet cursus sit amet dictum. Consectetur adipiscing elit ut aliquam purus sit amet. Urna et pharetra pharetra massa massa. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Facilisis sed odio morbi quis commodo odio. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Scelerisque purus semper eget duis at tellus at.
Est ante in nibh mauris. Vivamus arcu felis bibendum ut tristique et egestas. Amet venenatis urna cursus eget. Donec ac odio tempor orci dapibus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin ac orci phasellus. Volutpat lacus laoreet non curabitur gravida arcu. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut consequat. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Risus pretium quam vulputate dignissim suspendisse in est ante in. Urna duis convallis convallis tellus id interdum velit. Cursus turpis massa tincidunt dui ut ornare lectus sit. Donec adipiscing tristique risus nec feugiat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ipsum faucibus vitae aliquet nec ullamcorper sit. Massa tempor nec feugiat nisl pretium fusce id velit ut. Magna sit amet purus gravida quis blandit turpis.
Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lacinia quis vel eros donec ac odio. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et pharetra pharetra massa massa ultricies mi. Elit scelerisque mauris pellentesque pulvinar pellentesque. Massa sapien faucibus et molestie ac feugiat. Dolor sit amet consectetur adipiscing. Nulla porttitor massa id neque aliquam vestibulum. Et malesuada fames ac turpis egestas sed tempus urna. Vitae turpis massa sed elementum tempus egestas sed sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce. Volutpat consequat mauris nunc congue nisi vitae. <br><br>Vivamus arcu felis bibendum ut tristique et egestas. Amet venenatis urna cursus eget. Donec ac odio tempor orci dapibus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin ac orci phasellus. Volutpat lacus laoreet non curabitur gravida arcu. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut consequat. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Risus pretium quam vulputate dignissim suspendisse in est ante in. Urna duis convallis convallis tellus id interdum velit. Cursus turpis massa tincidunt dui ut ornare lectus sit. Donec adipiscing tristique risus nec feugiat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ipsum faucibus vitae aliquet nec ullamcorper sit. Massa tempor nec feugiat nisl pretium fusce id velit ut. Magna sit amet purus gravida quis blandit turpis.
Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lacinia quis vel eros donec ac odio. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et pharetra pharetra massa massa ultricies mi. Elit scelerisque mauris pellentesque pulvinar pellentesque. Massa sapien faucibus et molestie ac feugiat. Dolor sit amet consectetur adipiscing. Nulla porttitor massa id neque aliquam vestibulum. Et malesuada fames ac turpis egestas sed tempus urna. Vitae turpis massa sed elementum tempus egestas sed sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce. Volutpat consequat mauris nunc congue nisi vitae.<br> <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus in hac habitasse platea dictumst vestibulum. Eget arcu dictum varius duis at consectetur lorem donec. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. In fermentum posuere urna nec tincidunt praesent. Amet mauris commodo quis imperdiet massa. Scelerisque purus semper eget duis at tellus. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Id consectetur purus ut faucibus pulvinar elementum integer enim. Amet porttitor eget dolor morbi non arcu risus. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Ultrices eros in cursus turpis. Venenatis urna cursus eget nunc. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Felis eget velit aliquet sagittis id consectetur purus ut.
Nam libero justo laoreet sit amet cursus sit amet dictum. Fames ac turpis egestas integer. Nunc congue nisi vitae suscipit tellus mauris. Id diam maecenas ultricies mi eget. Purus sit amet volutpat consequat. Egestas pretium aenean pharetra magna ac. Viverra mauris in aliquam sem. Tellus mauris a diam maecenas sed enim ut sem viverra. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Pellentesque id nibh tortor id aliquet. Lacus luctus accumsan tortor posuere ac ut. Nibh sed pulvinar proin gravida hendrerit lectus a. Nisl nisi scelerisque eu ultrices vitae auctor eu. At auctor urna nunc id cursus metus aliquam eleifend. Proin sed libero enim sed faucibus turpis in.
Ultricies integer quis auctor elit sed vulputate mi sit amet. Quam quisque id diam vel quam elementum pulvinar. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Amet cursus sit amet dictum. Consectetur adipiscing elit ut aliquam purus sit amet. Urna et pharetra pharetra massa massa. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Facilisis sed odio morbi quis commodo odio. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Scelerisque purus semper eget duis at tellus at.
Est ante in nibh mauris. Vivamus arcu felis bibendum ut tristique et egestas. Amet venenatis urna cursus eget. Donec ac odio tempor orci dapibus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin ac orci phasellus. Volutpat lacus laoreet non curabitur gravida arcu. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut consequat. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Risus pretium quam vulputate dignissim suspendisse in est ante in. Urna duis convallis convallis tellus id interdum velit. Cursus turpis massa tincidunt dui ut ornare lectus sit. Donec adipiscing tristique risus nec feugiat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ipsum faucibus vitae aliquet nec ullamcorper sit. Massa tempor nec feugiat nisl pretium fusce id velit ut. Magna sit amet purus gravida quis blandit turpis.
Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lacinia quis vel eros donec ac odio. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et pharetra pharetra massa massa ultricies mi. Elit scelerisque mauris pellentesque pulvinar pellentesque. Massa sapien faucibus et molestie ac feugiat. Dolor sit amet consectetur adipiscing. Nulla porttitor massa id neque aliquam vestibulum. Et malesuada fames ac turpis egestas sed tempus urna. Vitae turpis massa sed elementum tempus egestas sed sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce. Volutpat consequat mauris nunc congue nisi vitae. <br><br>Vivamus arcu felis bibendum ut tristique et egestas. Amet venenatis urna cursus eget. Donec ac odio tempor orci dapibus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin ac orci phasellus. Volutpat lacus laoreet non curabitur gravida arcu. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut consequat. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Risus pretium quam vulputate dignissim suspendisse in est ante in. Urna duis convallis convallis tellus id interdum velit. Cursus turpis massa tincidunt dui ut ornare lectus sit. Donec adipiscing tristique risus nec feugiat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ipsum faucibus vitae aliquet nec ullamcorper sit. Massa tempor nec feugiat nisl pretium fusce id velit ut. Magna sit amet purus gravida quis blandit turpis.
Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lacinia quis vel eros donec ac odio. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et pharetra pharetra massa massa ultricies mi. Elit scelerisque mauris pellentesque pulvinar pellentesque. Massa sapien faucibus et molestie ac feugiat. Dolor sit amet consectetur adipiscing. Nulla porttitor massa id neque aliquam vestibulum. Et malesuada fames ac turpis egestas sed tempus urna. Vitae turpis massa sed elementum tempus egestas sed sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce. Volutpat consequat mauris nunc congue nisi vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus in hac habitasse platea dictumst vestibulum. Eget arcu dictum varius duis at consectetur lorem donec. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. In fermentum posuere urna nec tincidunt praesent. Amet mauris commodo quis imperdiet massa. Scelerisque purus semper eget duis at tellus. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Id consectetur purus ut faucibus pulvinar elementum integer enim. Amet porttitor eget dolor morbi non arcu risus. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Ultrices eros in cursus turpis. Venenatis urna cursus eget nunc. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Felis eget velit aliquet sagittis id consectetur purus ut.
Nam libero justo laoreet sit amet cursus sit amet dictum. Fames ac turpis egestas integer. Nunc congue nisi vitae suscipit tellus mauris. Id diam maecenas ultricies mi eget. Purus sit amet volutpat consequat. Egestas pretium aenean pharetra magna ac. Viverra mauris in aliquam sem. Tellus mauris a diam maecenas sed enim ut sem viverra. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Pellentesque id nibh tortor id aliquet. Lacus luctus accumsan tortor posuere ac ut. Nibh sed pulvinar proin gravida hendrerit lectus a. Nisl nisi scelerisque eu ultrices vitae auctor eu. At auctor urna nunc id cursus metus aliquam eleifend. Proin sed libero enim sed faucibus turpis in.
Ultricies integer quis auctor elit sed vulputate mi sit amet. Quam quisque id diam vel quam elementum pulvinar. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Amet cursus sit amet dictum. Consectetur adipiscing elit ut aliquam purus sit amet. Urna et pharetra pharetra massa massa. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Facilisis sed odio morbi quis commodo odio. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Scelerisque purus semper eget duis at tellus at.
Est ante in nibh mauris. Vivamus arcu felis bibendum ut tristique et egestas. Amet venenatis urna cursus eget. Donec ac odio tempor orci dapibus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin ac orci phasellus. Volutpat lacus laoreet non curabitur gravida arcu. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut consequat. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Risus pretium quam vulputate dignissim suspendisse in est ante in. Urna duis convallis convallis tellus id interdum velit. Cursus turpis massa tincidunt dui ut ornare lectus sit. Donec adipiscing tristique risus nec feugiat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ipsum faucibus vitae aliquet nec ullamcorper sit. Massa tempor nec feugiat nisl pretium fusce id velit ut. Magna sit amet purus gravida quis blandit turpis.
Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lacinia quis vel eros donec ac odio. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et pharetra pharetra massa massa ultricies mi. Elit scelerisque mauris pellentesque pulvinar pellentesque. Massa sapien faucibus et molestie ac feugiat. Dolor sit amet consectetur adipiscing. Nulla porttitor massa id neque aliquam vestibulum. Et malesuada fames ac turpis egestas sed tempus urna. Vitae turpis massa sed elementum tempus egestas sed sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce. Volutpat consequat mauris nunc congue nisi vitae. <br><br>Vivamus arcu felis bibendum ut tristique et egestas. Amet venenatis urna cursus eget. Donec ac odio tempor orci dapibus. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin ac orci phasellus. Volutpat lacus laoreet non curabitur gravida arcu. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut consequat. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Risus pretium quam vulputate dignissim suspendisse in est ante in. Urna duis convallis convallis tellus id interdum velit. Cursus turpis massa tincidunt dui ut ornare lectus sit. Donec adipiscing tristique risus nec feugiat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ipsum faucibus vitae aliquet nec ullamcorper sit. Massa tempor nec feugiat nisl pretium fusce id velit ut. Magna sit amet purus gravida quis blandit turpis.
Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Lacinia quis vel eros donec ac odio. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et pharetra pharetra massa massa ultricies mi. Elit scelerisque mauris pellentesque pulvinar pellentesque. Massa sapien faucibus et molestie ac feugiat. Dolor sit amet consectetur adipiscing. Nulla porttitor massa id neque aliquam vestibulum. Et malesuada fames ac turpis egestas sed tempus urna. Vitae turpis massa sed elementum tempus egestas sed sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce. Volutpat consequat mauris nunc congue nisi vitae.</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 + 'px';
mountains_behind.style.top = value * 0.5 + 'px';
text.style.marginRight = value * 2 + 'px';
text.style.marginTop = value * 0.5 + 'px';
btn.style.marginTop = value * 0.5 + 'px';
header.style.top = value * 0.5 + 'px';
console.log(value);
})
</script>
</body>
</html>