JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

CSS

html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
html.scrolled {
    background-image:url(http://ringvemedia.com/server//bg.jpg);
}

JavaScript

jQuery(window).scroll(function () {
    var JarakScroll = 200; // jarak scrol
    var JumlahJarakPasScroll = jQuery(window).scrollTop();
    if (JumlahJarakPasScroll > JarakScroll) {
        //jQuery('html').addClass('scrolled');
        
         jQuery('html').animate({
 background-image:url(http://ringvemedia.com/server//bg.jpg);
}, {
  duration: "slow",
  easing: "easein"
});
    } else {
       // jQuery('html').removeClass('scrolled');
                                 jQuery('html').animate({
 background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}, {
  duration: "slow",
  easing: "easein"
});
    }
   
});