0

Quiero hacer una animación que se está usando mucho y es la que se activa cuando el scroll llega a la parte donde está la caja sin necesidad de hacer hover en la caja, por el momento solo lo sé hacer precisamente con hover, pero me interesa aprender cómo hacerlo de la manera que quiero, les pondría un ejemplo pero no sé cómo se llama ese tipo de animación. espero me entiendan

$('.padre').hover(function(){
  $('.hijo').css({
    "bottom": "0",
    "background": "#ff0",
  });
});
body{
margin: 0;
}
.padre{
width: 100%;
height: 200px;
background-color: #ddd;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hijo{
position: relative;
bottom: -100%;
background: #000;
transition: bottom 1s, background 3s;
width: 50px;
height: 50px;
margin: 50px;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="padre">
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
</div>

1 respuesta 1

0

$(document).scroll(function() {
  var arriba_documento = $(window).scrollTop();
  var abajo_documento = arriba_documento + $(window).height();

  var elemento_arriba = $('.padre').offset().top;
  var elemento_abajo= elemento_arriba + $('.padre').height();
  
  if ((elemento_abajo <= abajo_documento) && (elemento_arriba >= arriba_documento)) {
    $('.hijo').css({
      "bottom": "0",
      "background": "#ff0",
    });
  }
});
body{
margin: 0;
}

.contenedor {
  width: 100%;
}

.arriba {
  height: 120vh;
  width: 100%;
}

.abajo {
  height: 120vh;
  width: 100%;
}

.padre{
width: 100%;
height: 150px;
background-color: #ddd;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.hijo{
position: relative;
bottom: -100%;
background: #000;
transition: bottom 1s, background 3s;
width: 50px;
height: 50px;
margin: 50px;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">
<div class="arriba"></div>
<div class="padre">
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
</div>
<div class="abajo"></div>
</div>

Para hacer lo que quieres necesitas 2 cosas:

  1. Un evento para capturar cuando en la página se haga scroll.
  2. Saber las coordenadas del elemento a animar dentro de la página.

Con estas dos cosas, lo que hago es lanzar la animación cuando el alto del elemento a animar supere las coordenadas que marquen el top de la pantalla cuando hagas scroll.

2
  • Es lo que busco, pero este ejemplo se ejecuta ya casi al final. no hay posibilidad de ejecutarlo apenas la caja sea visible o cuando vaya en la mitad?
    – Header90
    Commented el 24 may. 2019 a las 4:41
  • La hay. Edité mi respuesta para que la animación se realice cuando el elemento donde se visualiza aparezca totalmente en la pantalla.
    – phpMyGuel
    Commented el 24 may. 2019 a las 6:46

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.