JSFiddle - React, Tailwind, and code Playground

HTML

<div class="heading"><strong>Scroll Down</strong></div>

<div class="container">
    <div class="slide right"></div>
    <div class="slide left"></div>
</div>

CSS

.heading {
    width:100%;
    height: 100vh;
    position:relative;
}

.container {
    width:100%;
    height: 100vh;
    position:relative;
}

.slide {
   width:50%;
   height:100%;
   margin:0;
   padding:0;
   position:absolute;
   
}

.right {
    background:red;
    float:right:
}

.left {
    background:blue;
    float:left;
}

JavaScript

var page_width  =  $(document).outerWidth(),
    page_height =  $(document).outerHeight(),
    left_image  =  $('.left'),
    right_image =  $('.right'),
    offset		=  (page_width) / page_height;

left_image.css({'left':'0px'});
right_image.css({'right':'0px'});

$(window).on('scroll', null, function(){
    var scrollTop =  $(window).scrollTop(),
        calc	  =  -(scrollTop*offset); 

    left_image.css({
        'margin-left': 'calc(100% + '+calc+'px)'

    });

    right_image.css({
        'margin-right': 'calc(100% + '+calc+'px)'
    });
});

$(window).resize(function(){
    page_width  =  $(document).outerWidth(),
    page_height =  $(document).outerHeight(),
    offset		=  (page_width) / page_height;
    var scrollTop =  $(window).scrollTop(),
        calc	  =  -(scrollTop*offset); 
    left_image.css({
        'margin-left': 'calc(100% + '+calc+'px)'

    });

    right_image.css({
        'margin-right': 'calc(100% + '+calc+'px)'
    });
});