I am a beginner in programming, and I want to complete an effect now! When the mouse scrolls down, the elements on the screen will follow the offset of the position, and when the mouse scrolls up again, the elements will also be offset to the original position. However, when the mouse is stopped, the position should not be continuously shifted to achieve a scrolling parallax effect.
But at present, the effect I am trying to accomplish is to give a fixed offset position duck.style.transform = 'translateY(100px)'; this will cause the element to move when the mouse is not scrolling. How can I fix this problem? ?
The desired effect is something like this URL example below https://codepen.io/hong-wei/pen/rNGbgKQ?editors=1010
let duck = document.querySelector(".duck");
let cloud1 = document.querySelector(".cloud1");
let cloud2 = document.querySelector(".cloud2");
let cloud3 = document.querySelector(".cloud3");
$(document).on("scroll", function() {
if (window.pageYOffset > 0) {
duck.style.transform = "translateY(100px)";
cloud1.style.transform = "translateY(120px)";
cloud2.style.transform = "translateY(80px)";
cloud3.style.transform = "translateY(60px)";
// duck.style.transition = '2s';
} else {
duck.style.transform = "translateY(-100px)";
cloud1.style.transform = "translateY(-120px)";
cloud2.style.transform = "translateY(-80px)";
cloud3.style.transform = "translateY(-60px)";
}
});.wrap {
position: relative;
background-color: #222;
height: 1000px;
}
.wrap .duck {
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 1s;
}
.wrap .cloud1 {
position: absolute;
top: 60px;
width: 360px;
left: 30px;
transition: 2s;
}
.wrap .cloud2 {
position: absolute;
top: 200px;
right: 100px;
width: 160px;
transition: 2s;
}
.wrap .cloud3 {
position: absolute;
top: 320px;
width: 560px;
transition: 2s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<img class="duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png
" alt="">
<img class="cloud1" src="https://upload.cc/i1/2022/02/19/7P4hcu.png
" alt="">
<img class="cloud2" src="https://upload.cc/i1/2022/02/19/7P4hcu.png
" alt="">
<img class="cloud3" src="https://upload.cc/i1/2022/02/19/7P4hcu.png
" alt="">
</div>Hopefully this fixes your issue.
let duck = document.querySelector(".duck");
let cloud1 = document.querySelector(".cloud1");
let cloud2 = document.querySelector(".cloud2");
let cloud3 = document.querySelector(".cloud3");
window.addEventListener("scroll", function() {
let rate = window.scrollY * 1;
let rateCloudsPositive = window.scrollY * 3;
let rateCloudsNegative = window.scrollY * -3;
duck.style.transform = `translateY(${rate}px)`;
cloud1.style.transform = `translateY(${rateCloudsPositive}px)`;
cloud2.style.transform = `translateY(${rate}px)`;
cloud3.style.transform = `translateY(${rate}px)`;
// duck.style.transition = '2s';
duck.style.transform = `translateY(${rateCloudsNegative}px)`;
cloud1.style.transform = `translateY(${rateCloudsNegative}px)`;
cloud2.style.transform = `translateY(${rateCloudsNegative}px)`;
cloud3.style.transform = `translateY(${rateCloudsNegative}px)`;
});