How to integrate parallax effect in the webstite

This is the website link: Website Anyone know how to add this type of parallax effect in react website.

I have tried with react scroll parallax library but not able to make it

The effect is called images sequence, i will do my best to explain it for you with demo code .

Use high resolution and low sized images
the images should has very low size for example each image is 12kb or up to 34kb you should consider the 3rd party countries which has low internet speed .

Add the images inside the container ( section container )

<div id="container">
    <img src="http://s23.postimage.org/t57meexkb/horse_1.png" class="animated" />
    <img src="http://s23.postimage.org/i86apnasr/horse_2.png" class="animated" />
    <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png" class="animated" />
    <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png" class="animated" />
    <img src="http://s23.postimage.org/ddclrdch7/horse_5.png" class="animated" />
    <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png" class="animated" />
    <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png" class="animated" />
    <img src="http://s23.postimage.org/n1un88wob/horse_8.png" class="animated" />
    <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png" class="animated" />
    <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png" class="animated" />
    <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png" class="animated" />
    <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png" class="animated" />
    <img src="http://s23.postimage.org/imc82zka3/horse_13.png" class="animated" />
    <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png" class="animated" />
</div>
<div style="display: block; height: 2000px; width: 100px;"></div>

and then use javascript or jQuery to calculate the scroll inside the page or the desired section to play the sequence based on scroll percentage .

$(document).ready(function () {
    var pictureCount = $('#container img').length;
    var scrollResolution = 50;

    animateHorse();
    
    function animateHorse() {
        var currentScrollPosition = window.pageYOffset;
        var imageIndex = Math.round(currentScrollPosition / scrollResolution);
        
        if (imageIndex >= pictureCount) {
            imageIndex = pictureCount - 1; // Select last image
        }
        
        $("#container img").hide();
        $("#container img").eq(imageIndex).show();
    }
    
    $(window).bind('scroll', function() {
        animateHorse();
    });
});

a little CSS touches :

@import "compass/css3";

#container {
  position: fixed;
}

.animated {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}

here is full working code :

https://codepen.io/nowmad/pen/NWLzrM