1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Cycle through different sized images on scroll

Discussion in 'CSS' started by 7643sfsag6, Jul 4, 2018.

  1. #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/
    SEMrush
    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>
    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 */
          }
    Code (CSS):
    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")
              }
            })
          });
    
    Code (JavaScript):
     
    Last edited: Jul 4, 2018
    7643sfsag6, Jul 4, 2018 IP
    SEMrush
  2. 7643sfsag6

    7643sfsag6 Greenhorn

    Messages:
    41
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #2
    here's the answer over at https://stackoverflow.com/questions/51181051/cycle-through-different-sized-images-on-scroll/51181849#51181849
     
    7643sfsag6, Jul 6, 2018 IP