Cuando diseñamos una página web, una de las máximas es crear algo que atraiga la atención de la gente que la visita. Y las animaciones es un sistema que nos puede ayudar en esa tarea. Eso si, no hablamos de las animaciones típicas de la web de finales de los 90 y principio de los 2000, sino de algo más útil y menos molesto.
En esta ocasión, usaremos animaciones CSS por varios motivos. Es más fácil de implementar, además de que consumirán bastantes menos recursos y cargan de forma más rápida. En SiloCreativo hemos hablado varias veces sobre como hacer animaciones CSS para, por ejemplo, la página de error 404.
En este tutorial, no tocaremos nada de código CSS, ya que nos ayudaremos de complementos de WordPress, y de la facilidad que nos da Gutenberg para añadir clases CSS. Si no sabes como añadir clases CSS en Gutenberg, te recomendamos echar un vistazo a nuestro artículo sobre como crear columnas asimétricas en Gutenberg, donde hacemos usa de esta funcionalidad.
Añadir animaciones con Animate It!
Gracias a WordPress, disponemos de muchos plugins con los que poder animar nuestra web, y que están completamente actualizados para funcionar con Gutenberg. Uno de los más usados y con mejores valoraciones es Animate It!, que es el que utilizaremos en este artículo. Como siempre, lo primero que debemos hacer es instalar y activar este plugin en nuestro WordPress.
Una vez hayamos hecho esto, ya estará todo el código CSS necesario en nuestra web. El siguiente paso será crear la animación que queramos crear, con todas sus características, para luego aplicarla a los diferentes elementos de nuestra página.
Diseñando nuestras animaciones
Animate It! dispone de dos página que nos servirán de referencia y ayuda antes de empezar a trabajar en nuestra web. La primera de ellas es el sitio demo de Animate It!, donde hay una pequeña muestra de las animaciones disponibles con este complemento. Además de poder comprobar de primera mano como se comportan y se ven en nuestro navegador web.
La segunda es la llamada Class Generator, y es la más importante, ya que es la que nos va a permitir crear la animación a través de diferentes campos y selectores, y ver en vivo como es la animación. Si entramos en dicha página, veremos algo parecido a esto.
En la parte superior aparece un icono donde veremos la animación que elijamos en los campos inferiores. Si pulsamos en el botón Animate it, volverá a repetir la animación. El primer menú es el de estilo. Tenemos desde zoom, rebotes, deslizamientos en diferentes direcciones, rotaciones… Os recomendamos experimentar todas las opciones que ofrece hasta tener la que más os guste.
Justo debajo tenemos los campos de Delay, con el que marcar el retraso con el que aparecerá la animación, y Duration, que es lo que durará la animación de inicio a fin. También podemos hacer que la animación se repita de forma indefinida si marcamos la opción Animate Infinitely. Las tres últimas opciones son muy importantes, ya que es donde diremos cuando queremos que aparezca la animacion: al hacer scroll, al hacer click o al hacer hover. Hay que tener en cuenta que solo podemos marcar una de las tres opciones.
Una vez tengamos todas las opciones elegidas, pulsaremos en el botón Generate, y nos dará un código CSS que deberemos copiar. Una vez lo hayamos copiado, es hora de ir a WordPress.
Aplica tus animaciones en WordPress
En primer lugar, tendremos que tener una entrada o página creada con Gutenberg, con algún bloque dentro de la misma. Seleccionamos el bloque que queramos animar, y nos vamos a su panel de opciones, en el lateral derecho. Justo al final de dichas opciones, en la sección Avanzado, vemos un campo de texto llamado Clases CSS Adicionales. En este campo es donde hay que pegar el código CSS que hemos obtenido en el punto anterior.
Y esto es todo. Fácil y rápido. Este código CSS podemos aplicarlo a cualquier otro bloque, sabiendo que es esa animación en concreto que hemos creado en la página de Class Generator de Animate It!. Por supuesto, podemos volver a esta página, crear otra animación diferente, con la que obtendremos otro código CSS para pegarlo en el bloque de Gutenberg que queramos.
Guarda tu publicación y observa los resultados
Una vez hayamos aplicado las clases CSS de las animaciones a cada bloque correspondiente, podremos guardar y actualizar nuestra página para ver los resultados. De forma inmediata, estarán aplicados y podremos ver como se comportan con nuestro diseño.
¿Dónde podemos aplicar estas animaciones?
Como estamos trabajando dentro de Gutenberg, podemos añadir animaciones a cualquier elemento que creemos en el editor de bloques. Es decir, desde bloques completos, hasta imágenes o párrafos que estén dentro de un bloque. Todo aquel elemento que sea susceptible de añadirle una clase CSS podremos animarlo.
A modo de recomendación personal, no es aconsejable aplicar una animación a todos los elementos de nuestra página y/o entrada. A ser posible, haremos un análisis previo de nuestra página para escoger cuales son los puntos importantes y que encajarían que tuviesen cierta animación. Si todo está animado, nada sobresale sobre lo demás. Además de poder causar a nuestros visitantes cierto rechazo, que es el efecto contrario al que vamos buscando.
Como hemos podido comprobar, añadir animaciones a WordPress es tremendamente sencillo, y en poco minutos tendremos nuestra web con un estilo completamente diferente y mucho más dinámico y llamativo. Esperemos que os haya servido de ayuda este tutorial. Y como siempre, tenéis los comentarios abiertos para cualquier duda o experiencia que queráis contarnos!