Change (different sized) images on scroll

by 2jddfsjad

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  
  
  
<script>
 $(document).ready(function(){var a=$(document).height();var b=a-$("#bottommark").position().top;$(window).scroll(function(){var e=$(document).height();var f=$(window).scrollTop();var c=e-$("#bottommark").position().top-f;var d=b/5;$("span").html(c);if(c>d*4)
{$("#animation").attr("src","https://picsum.photos/200/200?image=1")}if((c<d*4)&&(c>d*3)){$("#animation").attr("src","https://picsum.photos/200/200?image=2")}if((c<d*3)&&(c>d*2)){$("#animation").attr("src","https://picsum.photos/200/200?image=3")}if(c<d*2&&c>d*1){$("#animation").attr("src","https://picsum.photos/200/200?image=4")}if(c<d){$("#animation").attr("src","https://picsum.photos/200/200?image=5")}})});
  </script>
  
  <style>
body, html {height: 7000px;margin: 0;background-color:grey;}
.hidden{position:absolute;top:-9999999px}
#bottommark{position:absolute;bottom:0;}

#contentwrapper {width:100%;height:100%; position:fixed;}
.centreme {
    position: fixed;
    width: 200px;   /* the image width */
    height: 200px;  /* the image height */
    top: 50%;
    left: 50%;
    margin-top: -100px;  /* half the image height */
    margin-left:-100px;  /* half the image width */
}
</style>
</head>
<body >

<div id="contentwrapper">
<div class="centreme">
<img src="https://picsum.photos/200/200?image=1"  id="animation" />
<img class="hidden" src="https://picsum.photos/200/200?image=1"/>
<img class="hidden" src="https://picsum.photos/200/200?image=2"/>
<img class="hidden" src="https://picsum.photos/200/200?image=3"/>
<img class="hidden" src="https://picsum.photos/200/200?image=4"/>
<img class="hidden" src="https://picsum.photos/200/200?image=5"/>
<div id="bottommark"></div>
</div>
</div>

</body>
</html>