Replace Image with another on scroll

by Omar Atta

HTML

<!-- Replace Image with another on scroll, using jQuery -- By Omar A. -->
<!-- To use it in your site 
  ===> Src: primary image
  ===> data-animate: secondary image
-->
<div id="wrapper">
  <ul class="gifs">

<li class="grd col-xs-12 col-sm-6 col-md-3 gutter-margin-xs-sm gutter-margin-sm-md">
<div class="grd_pic"> 
<a href="" target="_top">
    <img class="imagclass" src="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800-c-k-rw/y0rs8Fo.gif" data-animate="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800/y0rs8Fo.gif
" data-original="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800-c-k-rw/y0rs8Fo.gif">
</a>
</div>
</li>

<li class="grd col-xs-12 col-sm-6 col-md-3 gutter-margin-xs-sm gutter-margin-sm-md">
<div class="grd_pic"> 
<a href="" target="_top">
    <img class="imagclass" src="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800-c-k-rw/y0rs8Fo.gif" data-animate="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800/y0rs8Fo.gif
" data-original="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800-c-k-rw/y0rs8Fo.gif">
</a>
</div>
</li>

<li class="grd col-xs-12 col-sm-6 col-md-3 gutter-margin-xs-sm gutter-margin-sm-md">
<div class="grd_pic"> 
<a href="" target="_top">
    <img class="imagclass" src="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800-c-k-rw/y0rs8Fo.gif" data-animate="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800/y0rs8Fo.gif
" data-original="https://2.bp.blogspot.com/-tN06GKuwzkM/WDzYkJMwR1I/AAAAAAAAIn8/HFHbWRl9__kpWbAFpzER29y23XHy-fdSACLcB/s800-c-k-rw/y0rs8Fo.gif">
</a>
</div>
</li>

<li class="grd col-xs-12...

CSS

/* For Demo Only */
img {
  width: 400px;
  height: 300px;
}
img.animated {
  border: 2px solid red;
}
ul {
  list-style: none;
}
/*.grd {
  margin-bottom: 40px;
}*/

.visible {
  border-color: yellow;
}

JavaScript

/* 
 * isScrolledIntoView function source: http://stackoverflow.com/a/488073
 */
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

//On Page Load Before Scroll
if(isScrolledIntoView('.grd')) {
		var animate = $('.grd').find('img').data('animate');
    var fixed   = $('.grd').find('img').data('original');
    $('.grd').css('border', '1px solid red');
    $('.grd').find('.imagclass').attr("src", animate).addClass("animated");
      
}else {
    $(this).css('border', '');
    $(this).find('.imagclass').attr("src", fixed).removeClass("animated");
      
}

//When Scroll
$(window).scroll(function() {

	$('.grd').each( function() {
  	var animate = $(this).find('img').data('animate');
    var fixed   = $(this).find('img').data('original');
  	if(isScrolledIntoView(this)) {
    	$(this).css('border', '1px solid red');
    	$(this).find('.imagclass').attr("src", animate).addClass("animated");
      
    }else {
    	$(this).css('border', '');
    	$(this).find('.imagclass').attr("src", fixed).removeClass("animated");
      
    }
    
  });
  
});