I am a Javascript beginner. Recently, I saw a website with a scroll parallax effect. When the mouse scrolls, the pictures will overlap and move, just like this website's effect
example website: http://www.firewatchgame.com/
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
I also tried to make one myself, I will only use the easiest way! But now I have a problem when the web page scrolls, the element does move, but I want the element to go back to the original place when the web page scrolls, but I don't know how How to achieve such an effect, I do not know if you can provide me to help modify this program.
Or if you have done a similar effect and have a better way to write it, please share it with me, thank you.
Try this
use "photo" as a class for all the photos then add this line of code
if(scrollH>300) $('.photo').css("position", "fixed")