Cycle through different sized images on scroll

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:

   <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>

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

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

Sorry we missed your post we’ll have to do better next time :slight_smile:

Glad you got it sorted anyway.

2 Likes

I see you have an answer, but you may find the following solution useful.

To use different image sizes change the containing box css like this:

 .centreme {
   position: fixed;
 /* width: 400px; <<< Remove this */;
 /* height: 200px; <<< Remove this */;
    top: 50%;
    left: 50%;
    margin-left: -200px; /* half the image width of the first image */;
    margin-top: -100px; /* half the image height of the first image */;	
    border:1px solid #FFF;
  }

Then, add the negative margins that centre the image to each of the cases as shown below. Note that the margins are half the image width and height in each case.
I have changed the image width and height in several of your src attributes below as an example to show how this works for various aspect ratios.

When you create your own version you should use the natural width and height of the images you intend to use.

if (c > d * 4) {            
 $(".centreme").css( { margin:'-100px 0 0 -200px' });                                  
 $("#animation").attr("src", "https://picsum.photos/400/200?image=1")
          }
if ((c < d * 4) && (c > d * 3)) {            
 $(".centreme").css( { margin:'-200px 0 0 -100px' });           
 $("#animation").attr("src", "https://picsum.photos/200/400?image=2")
          }
if ((c < d * 3) && (c > d * 2)) {                        
 $(".centreme").css( { margin:'-175px 0 0 -225px' });           
 $("#animation").attr("src", "https://picsum.photos/450/350?image=3")
          }
if (c < d * 2 && c > d * 1) {                         
 $(".centreme").css( { margin:'-100px 0 0 -100px' });          
 $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
          }
if (c < d) {            
 $(".centreme").css( { margin:'-100px 0 0 -100px' });    
 $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
          }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.