I'm trying to provide a flex element animation that I can use multiple times. I can't use it multiple times because it triggers when the page is scrolling. How can I convert the closest element to a structure that I can select? My goal is to scroll the elements at different speeds with the transform feature while the page is scrolling.
$(window).scroll(function () {
let dataDiv = $(".relaxable");
let dataRl = parseInt(dataDiv.attr("dataRelaxing"));
let scroll = parseInt($(window).scrollTop());
let wHeight = parseInt($(window).height());
let transformCalc = (scroll * 0.1) + ((wHeight/100) + dataRl);
console.log(transformCalc);
});body {
height:2500px;
}
.relaxable {
background:red;
width:30px;
height:30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="relaxable" dataRelaxing="10" id="one">
</div>
<div class="relaxable" dataRelaxing="20" id="two">
</div>In the above example I can get the values of the first div element.I can't take the value "20" in the second div element and act accordingly