Циклическое переключение изображений разного размера при прокрутке

Всем привет, Я пытаюсь переключаться между изображениями при прокрутке (и я понимаю, что, возможно, jquery немного беспорядочен, но, похоже, он работает), но я бы хотел:

• иметь возможность иметь изображения разной высоты и ширины, а не одинакового размера (как сейчас).
  
• вертикально/горизонтально по центру.
  

Вот скрипка: https://jsfiddle.net/postcolonialboy/WTkqn/486/

Спасибо!

HTML:

 


$(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", "[URL='https://lumtu.com/yti/PQZZQPTFodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=1[/URL]")


}


if ((c < d * 4) && (c > d * 3)) {


$("#animation").attr("src", "[URL='https://lumtu.com/yti/PQZZQPTJodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=2[/URL]")


}


if ((c < d * 3) && (c > d * 2)) {


$("#animation").attr("src", "[URL='https://lumtu.com/yti/PQZZQPTNodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=3[/URL]")


}


if (c < d * 2 && c > d * 1) {


$("#animation").attr("src", "[URL='https://lumtu.com/yti/PQZZQPTRodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=4[/URL]")


}


if (c < d) {


$("#animation").attr("src", "[URL='https://lumtu.com/yti/PQZZQPTVodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=5[/URL]")


}


})


});

HTML: CSS:

 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 */ }

Код (CSS): JS:

 <div id="contentwrapper"> <div class="centreme"> <img src="[URL='https://lumtu.com/yti/PQZZQPTFodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=1[/URL]" id="animation" /> <img class="hidden" src="[URL='https://lumtu.com/yti/PQZZQPTFodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=1[/URL]" /> <img class="hidden" src="[URL='https://lumtu.com/yti/PQZZQPTJodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=2[/URL]" /> <img class="hidden" src="[URL='https://lumtu.com/yti/PQZZQPTNodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=3[/URL]" /> <img class="hidden" src="[URL='https://lumtu.com/yti/PQZZQPTRodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=4[/URL]" /> <img class="hidden" src="[URL='https://lumtu.com/yti/PQZZQPTVodHRwczovL3BpY3N1bS5waG90b3MvMjAwLzIwMD9pbWFnWbp']https://picsum.photos/200/200?image=5[/URL]" /> <div id="bottommark"></div> </div> </div>

Код (JavaScript):