0

Estoy probando animaciones css en una página.

La idea es lograr que una imagen aparezca desde abajo haciendo un fade, pero quiero que se realice la animación cada vez que vuelvo al div donde se encuentra la imágen.

HTML:

<div class="banner d-flex justify-content-center">
    <a class=" fadeInUp" href="#"><img class="img-fluid" src="assets/images/logo/black.png" alt="Dance Ergo Sum"></a>
</div>

CSS:

.banner > a {
    height: 125px;
    width: 250px;
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
} 

La animación en sí funciona perfectamente, pero solo al cargar la página. Quisiera saber si es posible lograrlo cada vez vuelvo a esa sección de la página ya sea haciendo scroll desde arriba o desde abajo.

Y la idea es tratar de usar solo CSS y HTML puro, sin JS.

No se si es posible, pero agradezco cualquier respuesta. Saludos.

1 respuesta 1

1

Lo que quieres hacer si o si se hace con Javascript y con sus llamados eventos, como tal lo puedes hacer con js vanilla pero te recomendaria que te ayudes de una librería que te ayude en el proceso de calcular el desplazamiento del scroll y dispare y active una animación cuando el div este situado en el viewport. Para ello hay algunas pero te comparto el link a una muy practica y simple que conozco.

https://css-tricks.com/aos-css-driven-scroll-animation-library/

1
  • Me imaginé.. gracias por la respuesta el 25 ene. 2021 a las 14:41

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.