Probablemente ya hayas utilizado o al menos te suene CSS Animate It. Se trata de un pack de animaciones y transiciones basadas en CSS3, desarrollado por Jack McCourt. Gracias a eLEOPARD Design Studios disponemos de un fantástico plugin que permite utilizar estas animaciones dentro de WordPress.

Su uso es muy sencillo:

  1. Escribimos “animate it” en el buscador de plugins del propio WordPress. Nos saldrá el primero porque es muy popular.
  2. Una vez instalado tendremos disponibles sus opciones de configuración global en  “Ajustes / Animate It!” Dichas opciones son tan claras que no es necesario detenerse a explicarlas.
  3. Cuando vayas a crear un nuevo artículo o editar uno ya existente te darás cuentas de que ahora disponemos de un botón rojo en nuestro editor:

4. Para probar cómo funciona, vamos a copiar un texto ficticio (Lorem Ipsum) que añadiremos a nuestro contenido y al que aplicaremos una de las animaciones de las que nos ofrece Animate It!

5. Seleccionamos todo el bloque de texto que acabamos de copiar y pulsamos el botón rojo que se nos ha añadido a nuestro editor:

6. Al pulsar el botón rojo con el texto previamente seleccionado, nos saldrá la siguiente ventana para elegir el tipo de animación a aplicar:

7. Como comentábamos al principio del artículo, configurarlo es muy sencillo y aquí recomiendo jugar un poco para ver cómo se comporta el plugin. Para el ejemplo, vamos a elegir una animación de tipo “fadeInUp” y el resto de opciones las dejamos como estaban.

8. Pulsamos el botón verde  “Insertar” y veremos que se han añadido a nuestro bloque de texto una serie de parámetros entre corchetes [ ]:

9. Para ver el resultado, pulsamos en la esquina superior derecha de nuestra pantalla de WordPress el botón “Vista previa”:

10. La animación se ha aplicado a nuestro texto. Si queremos probar otros tipos de animaciones, borramos los corchetes de inicio y fin que el plugin nos ha generado y repetimos el proceso desde el punto 5. Ten en cuenta que este tipo de animaciones se puede aplicar a cualquier parte de nuestro contenido, incluso a widgets que tengamos en un lateral de nuestra web, etc. Tienes toda la documentación en la web de eLEOPARD.

Diviértete jugando con el plugin, pero ten en cuenta que las animaciones tienen como finalidad mejorar la experiencia de usuario y deben tener un motivo.