-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (77 loc) · 3.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jorge Rivas</title>
</head>
<body>
<header>
<a href="#" class="logo">JRivas</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</header>
<section>
<img src="images/stars.png" id="stars">
<img src="images/moon.png" id="moon">
<img src="images/mountains_behind.png" id="mountains_behind">
<h2 id="text">Jorge Rivas</h2>
<a href="#sec" id="btn">Explore</a>
<img src="images/mountains_front.png" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>CHECK OUT MY TEST-SITE</h2>
<p>this is one of my test-sites i am a web developer html css javascript
Officiis, quia?<br><br>Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nulla natus eligendi, aut voluptates temporibus
quisquam est sed itaque labore voluptate soluta. Illum a voluptas
sit amet consectetur adipisicing elit. Sunt consequuntur veniam,
ullam, at nobis praesentium eaque sit, blanditiis est aut omnis
suscipit sapiente amet. Sapiente neque asperiores iure! Officiis,
quia?<br><br>Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nulla natus eligendi, aut voluptates
temporibus quisquam est sed itaque labore voluptate soluta.
Illum a voluptas sit dolores quaerat doloremque maiores
facere?. Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Minima dolorem tempora minus reiciendis
amet odit, mollitia, exercitationem, laborum hic a ipsa.
A adipisci eaque maxime dolor alias impedit dignissimos
consectetur? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Sunt consequuntur veniam, ullam, at
nobis praesentium eaque sit, blanditiis est aut omnis
suscipit sapiente amet. Sapiente neque asperiores iure!
Officiis, quia?<br><br>Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Nulla natus eligendi, aut voluptates
temporibus quisquam est sed itaque labore voluptate soluta.
Illum a voluptas sit dolores quaerat doloremque maiores
facere?. Sunt consequuntur veniam, ullam, at
nobis praesentium eaque sit, blanditiis est aut omnis
suscipit sapiente amet. Sapiente neque asperiores iure!
Officiis, quia? </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.05 + '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';
btn.style.marginTop = value * 1.5 + 'px';
header.style.top = value * 0.5 + 'px';
})
</script>
</body>
</html>