4 Replies - 391 Views - Last Post: 06 July 2018 - 01:59 AM

#1 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-July 15

Cycle through different sized images on scroll

Posted 04 July 2018 - 03:04 PM

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

Here is a fiddle: https://jsfiddle.net...lboy/WTkqn/484/

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


Is This A Good Question/Topic? 0
  • +

Replies To: Cycle through different sized images on scroll

#2 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-July 15

Re: Cycle through different sized images on scroll

Posted 04 July 2018 - 03:17 PM

i would like the images to be vertically/horizontally centered too
Was This Post Helpful? 0
  • +
  • -

#3 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-July 15

Re: Cycle through different sized images on scroll

Posted 04 July 2018 - 03:28 PM

updated fiddle: https://jsfiddle.net...lboy/WTkqn/486/
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6795
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: Cycle through different sized images on scroll

Posted 05 July 2018 - 01:08 AM

How to make an image center (vertically & horizontally) inside a bigger div

Using a background image with center center seems ideal.

The other aspect is to have their container larger than the max size of any image it might contain.

[I am not sure why you would need a bottommark, I would have thought the code could be written without it.]
Was This Post Helpful? 0
  • +
  • -

#5 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-July 15

Re: Cycle through different sized images on scroll

Posted 06 July 2018 - 01:59 AM

here's the answer over at https://stackoverflo...1181849/2675647
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1