-
Notifications
You must be signed in to change notification settings - Fork 0
/
imagescroll.html
51 lines (48 loc) · 6.22 KB
/
imagescroll.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.background-img{
background: url('https://www.pixelstalk.net/wp-content/uploads/2016/06/Nature-HD-Backgrounds-For-Mac.jpg') no-repeat;
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.para{
font-size: 20px;
padding: 55px;
}
</style>
</head>
<body>
<div class="background-img" id="bg-img">
</div>
<div class="para">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error aliquam amet quisquam laboriosam odio iste provident molestiae obcaecati asperiores! Ullam illum, et sed autem impedit ad nihil vel fugit! Beatae sequi ipsa enim eius, minima voluptatem accusamus. Doloremque et harum perferendis repellendus fugit? Rem quaerat labore laboriosam dicta, natus cupiditate?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis ab reiciendis facilis repellat rerum quidem dolor corrupti praesentium nobis molestiae totam illum, quasi id fugiat natus nostrum unde rem eum modi, impedit accusamus nesciunt. Velit quasi aspernatur, eos itaque quae alias, quaerat quibusdam sapiente officia veniam maxime temporibus? Adipisci, aspernatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rem et magni nobis illo deleniti nostrum, qui velit amet adipisci temporibus quos, expedita quis incidunt nihil esse saepe! Distinctio laborum esse molestias quidem culpa, voluptates quasi facere, officiis odio illum recusandae quam alias nulla incidunt accusamus? Dolorem eum facilis dignissimos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, iure blanditiis. Fugit, facere iure eaque unde dolor, itaque delectus necessitatibus nisi vel dolorem quae exercitationem perferendis quibusdam quo rem deserunt fuga expedita repellat doloribus laudantium qui aut blanditiis ea autem. Quaerat commodi impedit iure dolore ab perferendis sit dolores recusandae eligendi consequatur, voluptas quam molestiae quia suscipit amet unde cupiditate aspernatur obcaecati, totam rerum ut assumenda? Aliquam vero tempora optio nemo natus animi eos molestias quae, fugit id, quibusdam reiciendis! Fugiat doloremque neque ea, libero vitae veniam repellat dolores repudiandae exercitationem, illo qui est voluptatem minus suscipit error dignissimos distinctio inventore autem nisi et nihil. Voluptate rerum optio laborum minima. Quaerat, totam nobis odio dolor pariatur incidunt dolorem laudantium aspernatur ea repudiandae laboriosam provident repellendus, mollitia, vel magni sapiente voluptas expedita minima? Perspiciatis possimus esse optio beatae in, officiis delectus culpa animi, iste doloribus et incidunt vero magni aperiam laboriosam vel eveniet accusantium repellendus iure? Harum corporis ab reiciendis cum vero autem velit voluptate consequatur error voluptates, voluptatum aspernatur earum nam sunt quia corrupti a dolores deleniti quo. Necessitatibus quasi, quidem temporibus consequuntur saepe accusamus minima ducimus voluptatibus debitis totam fugit fugiat est suscipit et reiciendis quos perferendis rerum impedit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error aliquam amet quisquam laboriosam odio iste provident molestiae obcaecati asperiores! Ullam illum, et sed autem impedit ad nihil vel fugit! Beatae sequi ipsa enim eius, minima voluptatem accusamus. Doloremque et harum perferendis repellendus fugit? Rem quaerat labore laboriosam dicta, natus cupiditate?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis ab reiciendis facilis repellat rerum quidem dolor corrupti praesentium nobis molestiae totam illum, quasi id fugiat natus nostrum unde rem eum modi, impedit accusamus nesciunt. Velit quasi aspernatur, eos itaque quae alias, quaerat quibusdam sapiente officia veniam maxime temporibus? Adipisci, aspernatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rem et magni nobis illo deleniti nostrum, qui velit amet adipisci temporibus quos, expedita quis incidunt nihil esse saepe! Distinctio laborum esse molestias quidem culpa, voluptates quasi facere, officiis odio illum recusandae quam alias nulla incidunt accusamus? Dolorem eum facilis dignissimos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, iure blanditiis. Fugit, facere iure eaque unde dolor, itaque delectus necessitatibus nisi vel dolorem quae exercitationem perferendis quibusdam quo rem deserunt fuga expedita repellat doloribus laudantium qui aut blanditiis ea autem. Quaerat commodi impedit iure dolore ab perferendis sit dolores recusandae eligendi consequatur, voluptas quam molestiae quia suscipit amet unde cupiditate aspernatur obcaecati, totam rerum ut assumenda? Aliquam vero tempora optio nemo natus animi eos molestias quae, fugit id, quibusdam reiciendis! Fugiat doloremque neque ea, libero vitae veniam repellat dolores repudiandae exercitationem, illo qui est voluptatem minus suscipit error dignissimos distinctio inventore autem nisi et nihil. Voluptate rerum optio laborum minima. Quaerat, totam nobis odio dolor pariatur incidunt dolorem laudantium aspernatur ea repudiandae laboriosam provident repellendus, mollitia, vel magni sapiente voluptas expedita minima? Perspiciatis possimus esse optio beatae in, officiis delectus culpa animi, iste doloribus et incidunt vero magni aperiam laboriosam vel eveniet accusantium repellendus iure? Harum corporis ab reiciendis cum vero autem velit voluptate consequatur error voluptates, voluptatum aspernatur earum nam sunt quia corrupti a dolores deleniti quo. Necessitatibus quasi, quidem temporibus consequuntur saepe accusamus minima ducimus voluptatibus debitis totam fugit fugiat est suscipit et reiciendis quos perferendis rerum impedit.</p>
</div>
<script>
const bgImg = document.getElementById("bg-img");
window.addEventListener('scroll', () => {
bgImg.style.opacity = 1 - window.pageYOffset / 900;
bgImg.style.backgroundSize = 200 - window.pageYOffset / 12 + '%';
});
</script>
</body>
</html>