How to use js to complete the effect of scrolling parallax?

Question

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>

• Nilesh Kant: Here is the working codepen, what you trying to achieve. codepen.io/imshashankdogra/pen/NQxQJV
• AWEI: @NileshKant Thank you very much for the example you provided, but would like to ask if there is a way to directly change it to the goal I want to achieve according to my current example? thanks
• Nilesh Kant: You have given translate property with some top pixel. So, in that case once the translation starts it only stops when the given top achieves, and it will not stop it between.

Answer 1

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)`;
});

• AWEI: Hi, thanks for the advice! But I did the modification as you suggested, and it seems that there is no parallax scrolling effect? ? codepen.io/hong-wei/pen/qBVxgbj?editors=1010