Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    37
    Member #
    39433
    Liked
    1 times

    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:
    HTML Code:
       <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:
    HTML Code:
    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:
    HTML Code:
    $(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")
              }
            })
          });
    Last edited by 452wfr234; Jul 04th, 2018 at 04:23 PM.

  2.  

  3. #2
    Member
    Join Date
    Jun 2014
    Posts
    37
    Member #
    39433
    Liked
    1 times


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 12:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com