JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parallax">
    <div class="parent-container">
        <div id="left" class="container">
            <div class="box"></div>
        </div>
        <div id="right" class="container">
            <div class="box"></div>
        </div>
    </div>
</div>

CSS

div.parallax {
    height:200px;
    width:400px;
    overflow-x:scroll;
    overflow-y:visible;
}
div.parent-container {
    height:100%;
    width:300%;
}
div.container {
    width:50%;
    height:100%;
    float:left;
    overflow:hidden;
}
body div.container#left {
    background-image:url('http://lorempixel.com/g/600/200/cats/8');
}
body div.container#right {
    background-image:url('http://lorempixel.com/g/600/200/cats/2');
}
div.box {
    height:50px;
    width:50px;
    margin-top:-25px;
    margin-left:-25px;
    background-image:url('http://www.kewl.fr/img/coloriage-souris-15.jpg');
    background-size:contain;
    position:relative;
    top:50%;
}

JavaScript

$(".parallax").on("scroll", function() {
    var scrollValue = $(this).scrollLeft();
    var parallaxWidth = $(this).width();

    $(".box").each(function() {
        var container = $(this).parent();
        var containerWidth = $(container).width();
        var isLeftBox = $(container).is("#left");
        var ratioParallax = parallaxWidth/containerWidth;
        var ratioScroll = scrollValue/containerWidth;

        var move = 50*ratioParallax;

        if (isLeftBox) {
            var ratio =
            move += ratioScroll*100;

            if (ratioScroll > 1/3)
                move -= (ratioScroll-1/3)*50;
        } else {
            move += (ratioScroll-1)*100;

            if (ratioScroll < 1)
                move -= (ratioScroll-1)*50;
        }

        $(this).css("left", move+"%");
    });
});

$(".parallax").trigger("scroll");