JSFiddle - React, Tailwind, and code Playground

by need

HTML

<script src="http://dev.jonraasch.com/scrolling-parallax/examples/js/jquery.scrolling-parallax.js"></script>
<div id="content">
    <div id="div1">123</div>
    <div id="div2">456</div>
    <div id="div3">789</div>
</div>

CSS

#content{min-height:5000px;}
#div1{ position:fixed; top:120px; width:100%; height:20px;  background-color:Red;}
#div2{ position:fixed; top:200px; width:100%; height:50px;  background-color:Blue;}
#div3{ position:fixed; top:380px; width:100%; height:100px; background-color:Green;}

JavaScript

$(function() {

  $.scrollingParallax('http://dev.jonraasch.com/scrolling-parallax/examples/img/leaves-foreground.png', {
                staticSpeed: 1.7,
                loopIt: false,
                staticScrollLimit: false,
                bgHeight: '220%',
                disableIE6: true
            });

  $.scrollingParallax('http://dev.jonraasch.com/scrolling-parallax/examples/img/leaves-midground.png', {
                staticSpeed: .3,
                loopIt: true,
                bgHeight: '200%',
                disableIE6: true
            });

  $.scrollingParallax('http://dev.jonraasch.com/scrolling-parallax/examples/img/leaves-background.png', {
                staticSpeed: .17,
                loopIt: true,
                bgHeight: '280%',
                disableIE6Animation: true
            });

            $('#div1').scrollingParallax({
                staticSpeed: .1,
                loopIt: false,
                staticScrollLimit: false
            });
            $('#div2').scrollingParallax({
                staticSpeed: .3,
                loopIt: false,
                staticScrollLimit: false
            });
            $('#div3').scrollingParallax({
                staticSpeed: .5,
                loopIt: false,
                staticScrollLimit: false
            });
        });