JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page"></div>
<img src="https://placeimg.com/200/100/tech" id="img1">
<img src="https://placeimg.com/200/100/tech" id="img2">
<img src="https://placeimg.com/200/100/tech" id="img3">

CSS

#page {
    height: 5000px;
}
#img1 {
    width: 100px;
    position: fixed;
    background-color: red;
}

#img2 {
    width: 100px;
    position: fixed;
    background-color: green;
}

#img3 {
    width: 100px;
    position: fixed;
    background-color: blue;
}

JavaScript

$(document).ready(function(){
    $(window).on('scroll', function() {
        var top = $(window).scrollTop();
        var scroll = (top)/5000; //gives a value of 0-1 based on scroll position
        
        $("#img1").css({top: (scroll)*200 + 'px' });
        $("#img2").css({top: (scroll)*400 + 'px' });
        $("#img3").css({top: (scroll)*600 + 'px' });

    }).trigger('scroll');
});