Master Frontend to Backend https://bit.ly/frontend-to-backend-ebook —————— Revolutionize projects with our advanced …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<a href="#" class="logo">Ramadan</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section id="scene">
<h2 id="text">Ramadan Kareem</h2>
<img src="01.png" id="img1">
<img src="02.png" id="img2">
<img src="03.png" id="img3">
<img src="04.png" id="img4">
</section>
<div class="sec">
<h2>Parallax Scrolling Effects</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam veniam architecto explicabo dolor adipisci eligendi nemo tempore ut earum minima vero, recusandae qui voluptate cupiditate accusantium obcaecati maxime. Quam hic provident eligendi dolores eveniet veniam distinctio porro maxime sunt, numquam, quisquam expedita explicabo sed dolorum ipsam neque, vel minima reprehenderit deleniti laborum maiores! Atque ab assumenda ullam fugiat, neque illum fugit itaque error. Necessitatibus similique dicta molestias aliquam quam consequuntur beatae debitis nam dolor exercitationem, neque sequi natus assumenda enim! Voluptatum repudiandae neque eaque ipsam deserunt doloremque voluptatibus esse eveniet dolore obcaecati cupiditate rerum perspiciatis, consequatur nesciunt at voluptate.</br></br>Tempore deserunt sit blanditiis, quam debitis quidem adipisci in! Error, aspernatur ipsum. Non obcaecati, odio suscipit dolorem praesentium atque repellat? Ab, earum atque. Dolorem consequuntur nemo doloribus rerum! Voluptas mollitia excepturi similique animi repellat rem laboriosam repellendus quo esse illo. Mollitia numquam beatae animi dolore molestiae, quae sapiente doloremque, voluptatum voluptates aperiam consectetur cupiditate, minus eius harum? Officia quasi veniam exercitationem unde quas culpa corporis dolor est cum? Voluptate molestias quod illo officia mollitia saepe tempore, quia suscipit sunt adipisci quas eveniet minima quibusdam dicta reprehenderit nobis aspernatur reiciendis nulla ipsam! Quisquam, perferendis nihil tenetur vero deleniti voluptatem at impedit autem perspiciatis doloribus tempora, aut repellat blanditiis dicta doloremque? Est dolorem ipsam quam aliquid, voluptate vero illum deleniti dolorum facere optio doloremque aspernatur quaerat nam labore, repellendus rerum, qui reiciendis voluptates ratione.</br></br>Assumenda, reiciendis? Consequuntur dolore optio quod eaque dignissimos quae accusantium? Velit voluptate reprehenderit molestiae libero consectetur laborum ducimus cumque molestias maiores adipisci dolores nostrum recusandae, consequuntur excepturi, similique placeat officiis quisquam beatae quasi non voluptatibus quod nesciunt. Quis facilis reiciendis omnis facere? Consectetur quisquam accusamus est dolore magni? Debitis quod, cumque, qui dolorum nesciunt libero harum voluptate expedita iure repellat rem illo eaque ducimus ad labore accusantium. Quasi, corrupti.</p>
</div>
<script>
let text = document.getElementById('text');
let img1 = document.getElementById('img1');
let img2 = document.getElementById('img2');
let img3 = document.getElementById('img3');
window.addEventListener('scroll', function(){
let value = window.scrollY;
text.style.marginTop = value * -1.5+'px';
img1.style.top = value * 0.75+'px';
img2.style.top = value * 0.5+'px';
img3.style.top = value * 0.25+'px';
})
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
#header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
#header .logo
{
color: #094b65;
font-weight: 700;
text-decoration: none;
font-size: 2em;
}
#header ul
{
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
#header ul li
{
list-style: none;
}
#header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active
{
background: #094b65;
color: #fff;
}
#scene
{
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#scene #text
{
position: absolute;
transform: translateY(100%);
color: #094b65;
font-family: 'Rancho', cursive;
font-size: 10vw;
white-space: no-wrap;
text-align: center;
cursor: default;
}
#scene img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.sec
{
position: relative;
padding: 100px;
background: #131e1e;
}
.sec h2
{
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p
{
color: #fff;
font-size: 1em;
}
