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:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

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.

 

 

 

Share and Enjoy !

0Shares
0 0 0