Hi all,

I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:

- to be able to have images of different heights and widths, not all the same size (as it is now).

- vertically/horizontally centered.

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

1. body,
2.       html {
3.         height: 7000px;
4.         margin: 0;
5.         background-color: grey;
6.       }
7. 
   
8.       .hidden {
9.         position: absolute;
10.         top: -9999999px
11.       }
12. 
    
13.       #bottommark {
14.         position: absolute;
15.         bottom: 0;
16.       }
17. 
    
18.       #contentwrapper {
19.         width: 100%;
20.         height: 100%;
21.         position: fixed;
22.       }
23. 
    
24.       .centreme {
25.         position: fixed;
26.         width: 200px;
27.         /* the image width */
28.         height: 200px;
29.         /* the image height */
30.         top: 50%;
31.         left: 50%;
32.         margin-top: -100px;
33.         /* half the image height */
34.         margin-left: -100px;
35.         /* half the image width */
36.       }

1. $(document).ready(function() {
2.         var a = $(document).height();
3.         var b = a - $("#bottommark").position().top;
4.         $(window).scroll(function() {
5.           var e = $(document).height();
6.           var f = $(window).scrollTop();
7.           var c = e - $("#bottommark").position().top - f;
8.           var d = b / 5;
9.           $("span").html(c);
10.           if (c > d * 4) {
11.             $("#animation").attr("src", "https://picsum.photos/200/200?image=1")
12.           }
13.           if ((c < d * 4) && (c > d * 3)) {
14.             $("#animation").attr("src", "https://picsum.photos/200/200?image=2")
15.           }
16.           if ((c < d * 3) && (c > d * 2)) {
17.             $("#animation").attr("src", "https://picsum.photos/200/200?image=3")
18.           }
19.           if (c < d * 2 && c > d * 1) {
20.             $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
21.           }
22.           if (c < d) {
23.             $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
24.           }
25.         })
26.       });