Cycle through different sized images on scroll

programming web dev
1

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.

Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/

Thanks!

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

JS:
    $(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")
              }
            })
          });
2

If I understood what you are trying to do, you would like to have all of the images be vertically and horizontally centered. As you are scrolling down, the image displayed swaps out for another one. Scrolling doesn’t physically scroll the page. It just acts as a trigger for swapping one image out with another. Is it similar to the effect you see on the Mac Pro page: https://www.apple.com/mac-pro/ ?

3

here’s the answer over at https://stackoverflow.com/a/51181849/2675647