Fade out each image when it nears the top of viewport

Question

I am trying to fade out images when each one nears the top of the page using jQuery. I am currently using the following jQuery code, which works fine:

$(window).scroll(function(){
     $(".fade1").css("opacity", 1 - $(window).scrollTop() / 50);
});

But, I have to add a new class for each img and keep repeating this little chunk of code for each instance, but I should be able to do a for loop to find each parent with the class .fade, and then run the fading function when each image comes near the top of the viewport.

This code also works, but fades all images at the same time...

$( document ).ready(function() {

  $( ".fade" ).each(function( index ) {
    if($(this).find('img').length > 0){

      $(window).scroll(function(){
          $("img").css("opacity", 1 - $(window).scrollTop() / 50);
      });
     }
  });

});

I think the issue is, I need to declare that when each parent (div.fade) is found, do this to their child, img, but I don't know how to declare that without breaking the function.

I'd also love to have them fade in when they come into viewport at the bottom, but one thing at a time... :-)

Answer 1

So, I this is what I ended up using to create an effect with boxes fading in at slightly different speeds when they scroll into view:

 /* For category pages and home page, check to see if element is already in the viewport on page load */    
  /* Check the location of each desired element */
  $('.box').each( function(i){
    var bottom_of_object = $(this).offset().top + $('.box h5').outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();
      /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){
      $(this).animate({'opacity':'1'},500);   
    }
  }); 
  
 /* For category pages and home page, when the window is scrolled, fade articles in ... */
  function fadeBox(){
  /* Check the location of each desired element */
    $('.fade').each( function(i){
      var bottom_of_object = $(this).offset().top + $('.category-product h5').outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();  
      /* If the object is completely visible in the window, fade it it */
      if( bottom_of_window > bottom_of_object ){ 
        $(this).animate({'opacity':'1'},500);      
      }
    });
    $('.fade2').each( function(i){ 
      var bottom_of_object = $(this).offset().top + $('.category-product h5').outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
      /* If the object is completely visible in the window, fade it it */
      if( bottom_of_window > bottom_of_object ){
        $(this).animate({'opacity':'1'},700);      
      }
    }); 
    $('.fade3').each( function(i){ 
      var bottom_of_object = $(this).offset().top + $('.category-product h5').outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
      /* If the object is completely visible in the window, fade it it */
      if( bottom_of_window > bottom_of_object ){
        $(this).animate({'opacity':'1'},600);      
      }
    }); 
  }
  
  $(window).scroll( function(){
    
    fadeBox();
    
  });

.extra-space {
    height: 500px;
    border: 1px solid red;
    width: 100%;
}
.box {
    opacity: 0;
}
.info-boxes-section {
    padding: 20px 0;
}
.info-box p, .info-box a {
    margin: 0;
    font-size: 0.9rem;
}
.info-box {
    vertical-align: top;
    width: 49.2%;
    display: inline-block;
    text-align: center;
}
.info-box img {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="extra-space"></div>
<div class="white-full-width">
	<div class="info-boxes-section">
		<div class="info-boxes-wrapper">
    
      <article class="box info-box fade">
        <img class="fade" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade3">
        <img class="fade3" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade">
        <img class="fade" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade2">
        <img class="fade2" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>

    </div>
  </div>
</div>