Hey everyone, I'm struggling with a script issue!
I currently have a gallery of images where the opacity is set to 0 in my CSS. I want these images to become visible when scrolling down (on view). In this script, I have specified that they should appear when they reach 50% of their height, but for some reason, they are appearing at 100%. Can anyone help me understand why?
<script>
function isVisibleInViewport(elem, percentageOfImageBeforeAppearing){
if(typeof percentageOfImageBeforeAppearing == "undefined")
percentageOfImageBeforeAppearing = 0;
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
var breakPoint = elemTop + (percentageOfImageBeforeAppearing/100) * $(elem).width();
return ((elemBottom <= docViewBottom) && (breakPoint >= docViewTop));
}
function changeOpacity(){
$("img").each(function(){
var img = $(this);
if (isVisibleInViewport(this, 50)){
img.css("opacity", "1.0");
}
});
}
$(function(){
changeOpacity();
$(window).scroll(changeOpacity);
});
</script>