JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parallax slide-1"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, placeat, iure eum numquam harum facilis laborum optio unde tempora dicta ullam enim nesciunt architecto quos nam dolorem nihil Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, placeat, iure eum numquam harum facilis laborum optio unde tempora dicta ullam enim nesciunt architecto quos nam dolorem nihil placeat, iure eum numquam harum facilis laborum optio unde tempora dicta ullam enim nesciunt architecto quos nam dolorem nihil cum et beatae repudiandae dolorum dignissimos quia excepturi alias cupiditate repellendus fugit? Ut, ea, quisquam, maiores laborum voluptate tempore libero porro et quos veniam totam neque reprehenderit reiciendis vero nemo molestiae facere veritatis minima soluta recusandae assumenda asperiores hic in velit itaque illo nisi similique perferendis illum a. Optio, a ea perferendis sequi laborum distinctio enim vero fugiat unde quibusdam ullam quidem suscipit. Recusandae, unde, cumque, reprehenderit dolorem cum illum explicabo vero excepturi voluptatum consequuntur distinctio consectetur at provident id amet. Omnis, quis, vel nemo id voluptate quisquam natus! Obcaecati, aut, quisquam, totam laboriosam esse eos perspiciatis eligendi tenetur quis sequi rerum dolorum in eius aperiam expedita quaerat amet blanditiis ea nesciunt accusantium dolores omnis laborum voluptas ut asperiores atque exercitationem quae ipsum soluta tempore distinctio provident veniam animi! Porro, omnis odio fugit culpa aut atque explicabo voluptatibus a corporis aliquid minus quibusdam at ut minima sequi sit eius veritatis facilis dolor maxime praesentium soluta tempore unde molestias perspiciatis? Quam, iusto, at, optio, voluptas praesentium itaque officia labore unde quos nobis ducimus.</p>
<div class="parallax slide-2"></div>
<!-- End of Parallax -->
<p>Lorem ipsum dolor sit amet,...

CSS

.parallax {
    background-size : cover;
    margin : 0 0 20px 0;
    padding : 120px 0;
}
.parallax.slide-1 {
    background-image : url(http://lorempixel.com/g/1000/800/business);
}
.parallax.slide-2 {
    background-image : url(http://lorempixel.com/g/1000/800/business);
}
.parallax.slide-3 {
    background-image : url(http://lorempixel.com/g/1000/800/business);
}

JavaScript

$(document).ready(function () {

    $.fn.is_on_screen = function () {
        var win = $(window);
        var viewport = {
            top: win.scrollTop(),
            left: win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };


    $(window).scroll(function () { // Bind window scroll event
        $(".parallax").each(function () {
            if ($(this).is_on_screen()) { // Check if target element is visible on screen after DOM loaded

                // ANIMATE PARALLAX EFFECT
                // If Parallax Element is scrolled into view do...

                // Variables
                var speed = 2.5;
                var calc = (-window.pageXOffset / speed) + "px " + (-window.pageYOffset / speed) + "px";
                var container = $(this);

                // Function
                container.css({
                    backgroundPosition: calc
                });

            } else {
                // ...otherwise do nothing
            }
        });
    });

})