La animación de contenidos en la web es una práctica habitual en el diseño web. Desde hacer que las fotos aparezcan suavemente, a que la página se vaya formando según hacemos scroll, apareciendo los contenidos por los lados… Se trata de enfatizar contenidos o llamar la atención del usuario y mostrarle un diseño atractivo.
Existe una forma muy fácil de hacer todos estos efectos y que no suponen excesivo peso para la página, vamos a ver cómo.
Animate.css es una biblioteca de animaciones listas para usar en tus proyectos web.
Si entras en https://animate.style/ a la derecha podrás ver un montón de efectos que se aplican en tiempo real al contenido central de la página.
Vamos a ver cómo usarlo:
Para empezar hacemos la llamada a la librería, puedes descargarla y alojarla en tu host o puedes llamarla así:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
Luego, añade a tu texto o imagen la clase que quieres aplicar del siguiente modo:
<img src="imagen.png" class="animate__animated animate__rubberBand">
siendo rubberBand el efecto que quieres aplicar y que puedes sustituir por cualquiera de estos:
|
|
|
Prueba estas animaciones tanto en textos como imágenes, incluso puedes aplicarlo a un div para mover varios objetos a la vez.
En próximos post veremos cómo controlar estas animaciones, modificando la duración de la animación o el delay, unas opciones que incluso nos pueden servir para crear banners.
