Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2015
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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:
    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:
    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:
    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 lk4xm10df; Jul 4th, 2018 at 11:24 PM.

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,918
    Thanks
    3
    Thanked 415 Times in 404 Posts
    The centering technique you're using is the problem. Good for elements of a known size, useless for dynamic sizes. The fix? Well, there's three ways...

    method 1) CSS grid layout

    Code:
    .centreme {
    	position: fixed;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	display:grid;
    	justify-items:center;
    	align-items:center;
    }
    drop in replacement, works in all modern browsers, HAS ZERO SUPPORT IN ANY VERSION OF INTERNET EXPLORER.

    Second method actually isn't much better. display:flex. It's more code, more complex, hard to manage, and again has no legacy IE support (there's an implementation for 10 and 11, it bears NO resemblance to how other browsers work). I'm not even going to TRY giving you code for that.

    The final approach? display:table and display:table-cell, but you need an extra wrapping DIV for that.

    Code:
        <div class="centreme"><div class="centreInner">
            <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>
    Code:
    .centreme {
    	position: fixed;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	display:table;
    }
    
    .centreInner {
    	display:table-cell;
    	vertical-align:middle;
    	text-align:center;
    }
    Advantages are it works back to IE8, has a slight chance of working in IE7, and has high compatibility and reliability for being a 'proven' method.

    Though if these are presentation I'm not sure they even belong in the markup, it might be easier to assign them as a background-image that's centered, perhaps with background-size set to "fit". Also if they only really work scripting on, it might not make sense for them to be in the markup either.

    Actually yeah, count that as a forth technique that's way simpler, just put them on some div or span as background-image, position:fixed those elements full screen, and let background centering handle the rest.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. #3
    New Coder
    Join Date
    Jul 2015
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks @deathshadow

    here is also an answer - https://stackoverflow.com/a/51181849/2675647

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,918
    Thanks
    3
    Thanked 415 Times in 404 Posts
    Transform is another good answer, but it has many of the same problems in legacy compatibility as flex and grids. It also has the problem that since it relies on position:fixed ONLY it can be a bad choice if the image is larger than the window.

    If you display:table, flex, or grid you can set that fixed container to overflow:auto, instantly allowing you to have scrollbars when the window is too small for the image. You use fixed with transform it's just going to get cut off.

    Just something to consider.

    Another way of handling that which transform would work well with though is to set "max-height:100%; max-width:100%; width:auto; height:auto;" on the image, so that it will shrink to fit the screen if too big, but not expand past its native resolution. That would work with most any of the techniques we're talking about here.

    FAR too many sites I come across pulling this type of stunt fail to consider "what if the image is too large for the screen" -- and that can be a real pain in the arse for users.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

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