-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
52 lines (50 loc) · 4.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parallax Scrolling Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<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="images/stars.png" id="stars">
<img src="images/moon.png" id="moon">
<img src="images/mountains_behind.png" id="mountains_behind">
<h2 id="text">Moon Light</h2>
<a href="#sec" id="btn">Explore</a>
<img src="images/mountains_front.png" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>Parallax Scrolling Effects</h2>
<p>(内容随意发挥)Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.<br><br>Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.<br><br>Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.<br><br>Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.<br><br>Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.<br><br>Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a. Lorem ipsum, dolor sit amet consectetur adipiscing elit. Vero iste laboriosam iusto sapiente voluptatum a.</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>