-
Notifications
You must be signed in to change notification settings - Fork 0
/
parallax.html
68 lines (63 loc) · 7.04 KB
/
parallax.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
<!DOCTYPE html>
<html lang="en">
<head>
<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>Parallax</title>
<link rel="stylesheet" href="CSS/parallax.css">
</head>
<body>
<header>
<a href="#sec" class="logo">S H E R L O C K</a>
<ul>
<li><a href="#sec" class="active">Home</a></li>
<li><a href="#sec">About</a></li>
<li><a href="#bottom">Work</a></li>
<li><a href="#bottom">Contact</a></li>
</ul>
</header>
<section class="top" id="top">
<img src="IMG/stars.png" alt="" id="stars">
<img src="IMG/moon.png" alt="" id="moon">
<img src="IMG/mountains_behind.png" alt="" id="mountains_behind">
<h2 id="text">S H E R L O C K</h2>
<a href="#sec " id ="btn">Read more</a>
<img src="IMG/mountains_front.png" alt="" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>About Sherlock...</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, harum vel. Atque laborum possimus tenetur excepturi accusantium aspernatur labore culpa porro. Eligendi repudiandae nostrum dignissimos consectetur provident iure placeat ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eveniet est voluptate corrupti dolores quam nam neque ab fuga porro quos nesciunt nobis veritatis repellat quo vitae, magnam distinctio natus? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem inventore accusamus voluptatibus facere aperiam laborum adipisci ipsam facilis totam voluptatum repellat illum nam, id repudiandae eius, at placeat aliquam beatae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore totam voluptates repudiandae saepe aliquid a animi consequuntur ipsum veritatis officia, ipsa eos doloremque harum! Laboriosam asperiores in sequi accusantium similique! Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eos amet quisquam, commodi sit aut quas eaque iure alias officiis natus architecto eligendi. Laborum laudantium iusto maiores totam. Consectetur, tempore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae fugiat quibusdam delectus deserunt tenetur sint, laudantium ut sapiente sed optio eum quaerat. Ratione aliquid tenetur vel iure qui quaerat quia!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur facere necessitatibus laudantium repudiandae unde praesentium rerum incidunt consequuntur, soluta quo maiores veritatis voluptatibus quae est quam quas harum doloribus veniam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quibusdam expedita incidunt praesentium, magni itaque, delectus rem quisquam ratione est nobis. Nulla dicta reiciendis laudantium inventore ab dolorum doloremque blanditiis. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione perspiciatis iste dolore atque blanditiis. Numquam, doloribus corporis repellat animi sequi porro pariatur veritatis molestias suscipit dolorum sunt, nostrum quos! Voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod illum voluptatum nemo minus. Ullam eveniet tenetur pariatur quo tempore laudantium nesciunt facilis dolorum vitae commodi illum nostrum omnis, itaque voluptate. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit itaque expedita delectus nesciunt ratione voluptates quos, suscipit nisi incidunt necessitatibus accusamus porro tempore vitae autem, ad, et molestias vel quisquam! <br><br><br> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat fugiat maxime molestiae numquam, hic explicabo fugit aut veritatis sunt magni, aliquam atque laudantium ipsum temporibus? Quia beatae sunt quis dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit quae quisquam ut praesentium, perspiciatis eaque harum perferendis necessitatibus obcaecati quasi fuga. Fugit quia maxime dignissimos incidunt officia dicta pariatur nobis. <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repudiandae eos error ratione, ad sit voluptas quasi quisquam nulla iste, cumque officiis magnam corrupti ea natus! Velit at qui delectus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor debitis magni, minima voluptates adipisci esse. Ducimus perferendis quibusdam dicta nobis eaque dignissimos quisquam officia, vel illum nam explicabo, exercitationem voluptatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint amet beatae fuga corrupti sunt accusantium unde deserunt vel, ipsa voluptas numquam autem eveniet eum et velit tempora mollitia tempore architecto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum nulla sint vero voluptatibus earum in eum excepturi vitae eveniet nam quas praesentium autem, odio libero cumque quod magnam quo iure. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo inventore aut nisi soluta laudantium dolor enim. Quisquam non nobis quo accusamus magnam delectus voluptatibus aspernatur, vel ratione. Nam, sed ex! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae fuga minima quas velit ex sed at sunt, libero, fugit, nemo sint ducimus nobis ut numquam molestias reprehenderit assumenda rem aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ut quidem, vero debitis sunt voluptate. Nisi aspernatur qui nesciunt laudantium architecto! Dolor provident esse adipisci quas, sint maiores tempora saepe.</p>
<section class="bottom" id="bottom">
<div id="sherlock">
<img src="IMG\ClipartKey_765992.png" alt="" id="sher_img">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis dolore sit voluptatum praesentium ratione quis tempore! Nam accusamus dolorem voluptatum velit accusantium quidem quo ipsum, perspiciatis necessitatibus eos voluptates.</p>
</section>
<div class="cus">
<a href="#top" id ="btn"> ^ </a>
</div>
</div>
<script>
let stars= document.getElementById("stars");
let moon= document.getElementById("moon");
let mountains_behind= document.getElementById("mountains_behind");
let mountains_front= document.getElementById("mountains_front");
let text = document.getElementById("text");
let btn = document.getElementById("btn");
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>