I am new to Javascript and recently came across a website with a fascinating scroll parallax effect. The images on the site overlap and move as you scroll, similar to the effect on this particular website
Example website:
let scrollH;
let photo1 = document.querySelector(".photo1");
let photo2 = document.querySelector(".photo2");
let photo3 = document.querySelector(".photo3");
document.addEventListener("scroll", function () {
scrollH = window.pageYOffset;
if (scrollH > 300) {
photo1.style.transform = "translateY(-50px)";
}
if (scrollH > 300) {
photo2.style.transform = "translateY(-100px)";
}
if (scrollH > 500) {
photo3.style.transform = "translateY(-190px)";
}
console.log(scrollH);
});body{
background-color: #AEFEFF;
height: 2000px;
}
container{
position:relative;
margin-top: 500px;
width: 100%;
display: flex;
}
.photo1{
position: absolute;
top:90px;
left:20%;
width: 600px;
height: 200px;
background-color: #FFEEAD;
transform:translate3d(0px, -10, 0px));
z-index:1;
}
.photo2{
position:absolute;
top:30%;
right:10%;
width: 800px;
height: 200px;
background-color: #D9534F;
transform:translate3d(0px, 390px, 0px));
z-index:2;
}
.photo3{
position:absolute;
top:50%;
width: 900px;
height: 300px;
border-radius:300px;
background-color: #96CEB4;
transform:translate3d(0px, 960px, 0px));
z-index:3;
}<div class="container">
<div class="photo1"></div>
<div class="photo2"></div>
<div class="photo3"></div>
</div>]1
Although I attempted to create a similar effect myself using the simplest method possible, I encountered an issue. While the element does move when the webpage is scrolled, I would like it to return to its original position upon scrolling back up. However, I am unsure how to achieve this effect. If anyone could assist me in modifying this program or offer a better way to achieve the desired effect, I would greatly appreciate it. Thank you.