JSFiddle - React, Tailwind, and code Playground

HTML

<div class="new_container">

  <img src="http://www.mobile-pond.com/MobilePond/wp-content/uploads/2011/09/iPhone_overlay.png" class="overlay">

  <img class="hidden" src="http://67.media.tumblr.com/9e99ad428cf5d97daeffa75ee2023c89/tumblr_mpdzgtw9YN1qij426o1_500.png" />
  <img class="hidden" src="http://s2.favim.com/610/150603/beautiful-grunge-nature-photo-Favim.com-2788083.jpg" />
  <img class="hidden" src="http://67.media.tumblr.com/b23de1e0525625cd7327930bcdcd911a/tumblr_mrqq99vYIH1r83s39o1_500.jpg" />
  <img class="hidden" src="http://67.media.tumblr.com/5d85d43cbcdd87a71ea90ab9e0f74202/tumblr_navwxb40s11tfa1gho1_1280.png" />
  <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg" />

  <img src="http://41.media.tumblr.com/d489d89032f6419db96b938c8ecc448d/tumblr_n9ap5biSYa1qmy9exo1_500.jpg" id="animation" />

  <div id="bottommark"></div>

</div>

CSS

.new_container {
  width: 250px;
  margin: 0px auto;
}

.overlay {
  position: fixed;
  z-index: 9999;
}

.hidden {
  position: absolute;
  top: -9999999px;
}

#bottommark {
  position: absolute;
  bottom: 0;
}

#animation {
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  width: 220px;
  height: 450px;
  margin: 15px;
  z-index: 100;
}

body,
html {
  height: 1200px;
  margin: 0;
}

JavaScript

$(document).ready(function() {
  var offset2 = $(document).height();
  var lineHF = offset2 - $("#bottommark").position().top;
  $(window).scroll(function() {
    var offset1 = $(document).height();
    var offset = $(window).scrollTop();
    var lineH = offset1 - $("#bottommark").position().top - offset;
    var lineHpart = lineHF / 5;

    $("span").html(lineH);
    if (lineH > lineHpart * 4) {
      $("#animation").attr("src", "http://67.media.tumblr.com/9e99ad428cf5d97daeffa75ee2023c89/tumblr_mpdzgtw9YN1qij426o1_500.png");
    }
    if ((lineH < lineHpart * 4) && (lineH > lineHpart * 3)) {
      $("#animation").attr("src", "http://s2.favim.com/610/150603/beautiful-grunge-nature-photo-Favim.com-2788083.jpg");
    }
    if ((lineH < lineHpart * 3) && (lineH > lineHpart * 2)) {
      $("#animation").attr("src", "http://67.media.tumblr.com/b23de1e0525625cd7327930bcdcd911a/tumblr_mrqq99vYIH1r83s39o1_500.jpg");
    }
    if (lineH < lineHpart * 2 && lineH > lineHpart * 1) {
      $("#animation").attr("src", "http://67.media.tumblr.com/5d85d43cbcdd87a71ea90ab9e0f74202/tumblr_navwxb40s11tfa1gho1_1280.png");
    }
    if (lineH < lineHpart) {
      $("#animation").attr("src", "http://41.media.tumblr.com/d489d89032f6419db96b938c8ecc448d/tumblr_n9ap5biSYa1qmy9exo1_500.jpg");
    }
  });
});