Tengo un código que realiza una animación a una imagen al hacer scrollDown, deseo que luego de estar por debajo del elemento o desde el final del documento al hacer scrollUp nuevamente se realice la animación sobre el elemento.
Comparto código (también en Jsfiddle):
// determina si un elemento comienza a ser visible
function isElementVisible(elem) {
let viewScrollTop = $(window).scrollTop(); // distancia de scroll superior
let viewBottom = viewScrollTop + $(window).height(); // distancia de scroll + el alto actual de window (lo no visible por scroll + lo visible)
let topElemD = $(elem).offset().top; // distancia desde el elemento hasta el tope superior del viewport
return (topElemD < viewBottom);
}
// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll", function() {
let elem = $('.AnimacionBaja'); // obtengo el elemento por su clase
isElementVisible(elem) ? elem.addClass('baja') : elem.removeClass('baja'); // si es visible agrego la class, de lo contrario la remuevo
});
#texto {
height: 800px;
}
#animated-div {
height: 150px;
}
.baja {
animation-name: baja;
animation-duration: 4s;
}
@keyframes baja {
from {
transform: translate3d(0, -50%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div id="texto" class="col mt-5">
Scroll down !
</div>
</div>
<div class="row">
<div id="animated-div" class="col-4 offset-2 ing mx-auto AnimacionBaja">
<img src="https://dummyimage.com/300x300/000/fff" class="img-fluid" alt="">
</div>
</div>
</div>
<div style="margin-top:1000px">FINAL</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>