Show different images, based on percentage of page scrolled-CodePudding

I'm looking to fade-in different images, based on the percentage of the total page scrolled. The idea is that an image is shown at an even interval along the entire page.

Right now, I have the following code which is based on the amount of pixels scrolled. But since this doesn't work on different devices, it is not suited for my idea. Would anyone know how to pick up on what I have below and make it percentage of the entire page?

Thank you!

    $("#c1").fadeIn(500);
    $(document).scroll(function () {
      var pos = $(document).scrollTop();
      if (pos < 500) { hideAll("c1"); $("#c1").fadeIn(500); }
      if (pos > 1000 && pos < 1500) { hideAll("c2"); $("#c2").fadeIn(500); }
      if (pos > 2000 && pos < 2500) { hideAll("c3"); $("#c3").fadeIn(500); }
      if (pos > 3000 && pos < 3500) { hideAll("c4"); $("#c4").fadeIn(500); }
      if (pos > 4000 && pos < 4500) { hideAll("c5"); $("#c5").fadeIn(500); }
      if (pos > 5000 && pos < 5500) { hideAll("c6"); $("#c6").fadeIn(500); }
    });
    function hideAll(exceptMe) {
      $(".bg").each(function (i) {
        if ($(this).attr("id") == exceptMe) return;
        $(this).fadeOut();
      });
    }

body {height:9500px;}
.bg{width:25%;z-index:-1;display:none;position:fixed;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}
.bg img{max-height:100%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="c1"  style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
  <div id="c2" ><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
  <div id="c3" ><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
  <div id="c4" ><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
  <div id="c5" ><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
  <div id="c6" ><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>

CodePudding user response：

you could use the document scroll event which has cross-browser support:

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#browser_compatibility

here is your code using that method:

$("#c1").fadeIn(500);
document.addEventListener('scroll', function(e) {
  var pos = window.scrollY;
  if (pos < 500) {
    hideAll("c1");
    $("#c1").fadeIn(500);
  }
  if (pos > 1000 && pos < 1500) {
    hideAll("c2");
    $("#c2").fadeIn(500);
  }
  if (pos > 2000 && pos < 2500) {
    hideAll("c3");
    $("#c3").fadeIn(500);
  }
  if (pos > 3000 && pos < 3500) {
    hideAll("c4");
    $("#c4").fadeIn(500);
  }
  if (pos > 4000 && pos < 4500) {
    hideAll("c5");
    $("#c5").fadeIn(500);
  }
  if (pos > 5000 && pos < 5500) {
    hideAll("c6");
    $("#c6").fadeIn(500);
  }
});

function hideAll(exceptMe) {
  $(".bg").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}

body {
  height: 9500px;
}

.bg {
  width: 25%;
  z-index: -1;
  display: none;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.bg img {
  max-height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="c1"  style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
  <div id="c2" ><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
  <div id="c3" ><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
  <div id="c4" ><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
  <div id="c5" ><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
  <div id="c6" ><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>

what browsers / devices are you having issues with? do you need help doing the image swapping based on the % of the page scrolled?

I hope this helps

CodePudding user response：

Ah, I see now ok, so I believe this should work for you, it uses the methods from

javascript scroll event for iPhone/iPad?

I tested it using browserstack.com's mobile emulators on android and Iso and both seemed to work

$("#c1").fadeIn(500);
//use touch move for ISO mobile
window.addEventListener("touchmove", Scroll, false);
window.addEventListener("scroll", Scroll, false);

function Scroll() {
  var windowHeight = jQuery(document).height();
  //Capture where the top of the page is after scroll
  var currentPosition = jQuery(document).scrollTop();
  //Capture how many pixels can be viewed by the user
  var windowViewingArea = jQuery(window).height();
  //Figure out the bottom of what the user has scrolled to
  var bottomScrollPosition = currentPosition   windowViewingArea;
  //Figure out the rounded percentage of how much was scrolled
  var percentScrolled = parseInt((bottomScrollPosition / windowHeight * 100).toFixed(0));
  //console.log(percentScrolled)
  if (percentScrolled >= 15 && percentScrolled < 30) {
    hideAll("c1");
    $("#c1").fadeIn(500);
  } else if (percentScrolled >= 30 && percentScrolled < 45) {
    hideAll("c2");
    $("#c2").fadeIn(500);
  } else if (percentScrolled >= 45 && percentScrolled < 60) {
    hideAll("c3");
    $("#c3").fadeIn(500);
  } else if (percentScrolled >= 60 && percentScrolled < 75) {
    hideAll("c4");
    $("#c4").fadeIn(500);
  } else if (percentScrolled >= 75 && percentScrolled < 90) {
    hideAll("c5");
    $("#c5").fadeIn(500);
  } else if (percentScrolled >= 90) {
    hideAll("c6");
    $("#c6").fadeIn(500);
  }
}

function hideAll(exceptMe) {
  $(".bg").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}

body {
  height: 9500px;
}

.bg {
  width: 25%;
  z-index: -1;
  display: none;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.bg img {
  max-height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div id="c1"  style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
  <div id="c2" ><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
  <div id="c3" ><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
  <div id="c4" ><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
  <div id="c5" ><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
  <div id="c6" ><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>

Is this what you were after ?