# Cycle through different sized images on scroll

**URL:** <https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461>\
**Category:** web dev\
**Created:** [July 4, 2018, 10:03pm UTC](https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461 "2018-07-04T22:03:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [July 4, 2018, 10:03pm UTC](https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461/1 "2018-07-04T22:03:37Z")

</div>

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/](https://jsfiddle.net/postcolonialboy/WTkqn/486/)

Thanks!

HTML:

  

  
 ![](https://picsum.photos/200/200?image=1)  
 ![](https://picsum.photos/200/200?image=1)  
 ![](https://picsum.photos/200/200?image=2)  
 ![](https://picsum.photos/200/200?image=3)  
 ![](https://picsum.photos/200/200?image=4)  
 ![](https://picsum.photos/200/200?image=5)  

  

  

```
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")
              }
            })
          });
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 5, 2018, 3:24am UTC](https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461/2 "2018-07-05T03:24:31Z")

</div>

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/](https://www.apple.com/mac-pro/) ?

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [July 6, 2018, 8:59am UTC](https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461/3 "2018-07-06T08:59:11Z")

</div>

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