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>