JSFiddle - React, Tailwind, and code Playground

HTML

<div class="skyA"></div>
<div class="skyB"></div>

CSS

.skyA {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://evoenergy.co.uk/uk-energy-guide/img/sky.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    height: 1100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.skyB {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://evoenergy.co.uk/uk-energy-guide/img/morning-sky.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    height: 1100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

JavaScript

$(document).scroll(function(){
        t = (100 - $(this).scrollTop())/100;
        if(t<0)t=0;
        $('.skyB').css({opacity: t})
    })