1

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>

3
  • Quieres que cuando llegue al fondo del scroll este vaya hasta el tope nuevamente? el 16 sep. 2018 a las 19:26
  • Hola David, gracias por tomarte el tiempo de comentar. No, lo que pretendo es que cuando el usuario este por debajo del elemento (ya sea desde el fin del documento, o lineas más abajo), y el usuario tome la decisión de volver con el scroll hacia ariiba, cuando se encuentre con el elemento, que previamente visualizó, la animación que le tengo a ese elemento se vuelva a realizar. Actualmente solo se realiza la animación si hace scroll desde el inicio del documento hacia abajo.
    – Farney
    el 17 sep. 2018 a las 14:17
  • posiblemente relacionado es.stackoverflow.com/questions/179969/… el 18 sep. 2018 a las 21:27

1 respuesta 1

2

Para ver si un elemento está visible deberías comprobar si la parte superior está visible (algo que ya haces, comparando la parte superior del elemento con la parte inferior de la pantalla), pero también si la parte inferior está visible (que no haces, que sería comparando la parte inferior del elemento, posición vertical + altura, con la parte superior de la pantalla).

Sólo tendrías que añadir esa segunda comprobación a la función isElementVisible y ya debería verse (más o menos) la animación que buscas:

// 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
  let bottomElemD = topElemD + $(elem).height(); // posición de la parte inferior del elemento (tope superior + altura)
  return (topElemD < viewBottom && bottomElemD > viewScrollTop);
}


// 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>

1
  • 1
    Muy bien explicado @AlvaroMontoro, gracias por tu solución. Mientras resolvía esta situación me encontré AOS.js desde mi punto de vista es una solución general y extensible para el uso de Smooth, espero que a alguien más le pueda servir. VIDEO. De nuevo gracias Alvaro por tu valiosa ayuda!
    – Farney
    el 19 sep. 2018 a las 21:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.