Integra animaciones en WordPress con Animate.css

驴Alguna vez has querido darle un poco de estilo a tu blog o WordPress? ? Sin embargo, te das cuenta de que tu tema es excelente en muchos puntos, pero que no te permite animar tus textos o tus im谩genes como quieras ?

Entonces te sugiero que descubras la biblioteca Animate.css lo que le dar谩 una multitud de posibilidades en t茅rminos de acciones y animaciones.

css_animation_01

C贸mo usar ANIMATE CSS ?

Ver谩 que no hay nada m谩s f谩cil que ejecutar su sitio web … Veamos juntos dos m茅todos diferentes y simples para lograr el mismo resultado: el m茅todo manual y el m茅todo mediante un complemento.

M茅todo 1: integre Animate.css manualmente

Paso 1: Creaci贸n del tema de tus hijos.

Si su sitio a煤n no usa un tema para ni帽os, le aconsejo que primero cree uno antes de comenzar todas las dem谩s cosas … Si nunca ha hecho eso, le sugiero que lea este art铆culo dedicado o lo use un complemento gratuito como Child Theme Configurator por ejemplo.

Paso 2: prueba la biblioteca ANIMATE CSS

Ir al sitio de animate.css donde puede probar f谩cilmente los diferentes tipos de animaciones que ofrece esta biblioteca. Luego solo tendr谩 que elegir una animaci贸n y hacer clic en ANIMATE IT para ver la representaci贸n visual.
Biblioteca Animate.css

Paso 3: descargue la biblioteca ANIMATE CSS

Todav铆a en el sitio de animate.css , luego haga clic en DESCARGAR Animate.css : se abrir谩 una nueva pesta帽a en su navegador y solo tendr谩 que copiar el conjunto y luego pegarlo en un archivo que nombrar谩 animate.cssPara esto, necesitar谩 un editor de texto como. Texto sublim por ejemplo.
Cree un archivo Animate.css

Paso 4: Integre la biblioteca Animate.css en el tema de sus hijos

Ahora que ha creado el tema de sus hijos y el archivo CSS, deber谩 establecer una conexi贸n entre los dos. Para hacer esto, simplemente agregue una l铆nea de c贸digo a su archivo functions.php quien usar谩 tu archivo animate.css (vea la l铆nea 7 de la captura de pantalla a continuaci贸n).

Cree un archivo functions.php

Tenga cuidado de no olvidar enviar su archivo animate.css en el archivo del tema de sus hijos a trav茅s de FTP. Ahora, el tema de su hijo debe constar de al menos 3 archivos: el archivo FUNCTIONS.PHP, el archivo STYLE.CSS y el archivo ANIMATE.CSS

Paso 5: C贸mo aplicar las animaciones en WordPress ?

En su p谩gina o art铆culo, una vez que su contenido haya sido escrito en la pesta帽a “visual”, vaya a la pesta帽a “texto” que le permitir谩 agregar clases a cualquier etiqueta. Las animaciones funcionan en todas partes: en las etiquetas de t铆tulos, p谩rrafos, im谩genes, etc …

Aplicar clases a etiquetas HTML

Esto es lo que debe agregar a su etiqueta:

  • la clase “animada” : sin ella, la animaci贸n no funcionar谩. Esta clase lanza la animaci贸n solo cuando carga la p谩gina.
  • la clase “infinita” : esto es opcional y te permite reproducir la animaci贸n sin cesar.
  • La clase de animaci贸n : como podr铆a haberlo probado en el sitio (paso 2), esta clase aplicar谩 la animaci贸n deseada en su baliza.

Estas son algunas de las muchas clases disponibles para usted en la biblioteca:

  • rebotar
  • destello
  • pulso
  • banda de goma
  • agitar
  • HeadShake
  • columpio
  • tada
  • tambalearse
  • gelatina
  • rebotar
  • desvanecerse
  • desvanecerse
  • flipInX
  • lightSpeedIn
  • rotar en
  • rotar hacia abajo a la izquierda
  • bisagra
  • desplegar
  • zoomIn

Paso 6: Verifique el informe de animaci贸n

Despu茅s de agregar animaciones a su administraci贸n de WordPress, puede ir al lado del visitante para verificar si la representaci贸n visual es adecuada para usted.

M茅todo 2: integre Animate.css usando un complemento

Plugin lo anima

Concretamente, el m茅todo manual podr铆a asustar a ciertos novatos, por lo tanto Daniel Eden, el desarrollador de esta biblioteca, pens贸 en ofrecer un complemento gratuito: lo es la extensi贸n ANIMATE IT que puede encontrar en el cat谩logo de complementos oficiales de WordPress.

Gracias a esta extensi贸n, podr谩 realizar exactamente las mismas animaciones que se encuentran en el m茅todo manual, pero, adem谩s, podr谩 asignar f谩cilmente condiciones a sus animaciones, como la duraci贸n, el retraso antes de la primera aparici贸n, el desplazamiento de animaci贸n o desplazamiento, etc …

Todo esto tambi茅n es posible en la versi贸n manual, pero puede ser un poco m谩s complejo de lograr (a menos que est茅 utilizando el generador de clases: consulte el cap铆tulo “Bonificaci贸n”). Este complemento te har谩 la vida m谩s f谩cil !

Paso 1: instale el complemento

El complemento de instalaci贸n lo anima

Como cualquier complemento, vaya a la oficina administrativa de su sitio de WordPress para agregar el complemento Animarlo! y activarlo. Luego lo encontrar谩 en la pesta帽a REGLAGES> ANIMATE IT! : aqu铆 no tendr谩s mucho que configurar …

Animate It C么t茅 Admin

Paso 2: inserte un c贸digo corto para animar su contenido

De hecho, no es realmente en la configuraci贸n del complemento donde tendr谩 que intervenir, sino m谩s bien dentro de sus p谩ginas y sus art铆culos:

  1. Haga clic en el icono Animarlo en la pesta帽a visual de su art铆culo o p谩gina. Aparecer谩 una ventana …
  2. Define tu animaci贸n en funci贸n de la entrada (ENTRAR), de la salida (SALIR), del tipo de animaci贸n (Ejemplo FADEIN), El tiempo de inicio (DELAY), duraci贸n (DURACI脫N) y la forma en que se comporta (lineal, facilidad, etc …).
  3. Pruebe su animaci贸n haciendo clic en ANIMARLO : luego ver谩 el icono con la “varita m谩gica” reproducir la animaci贸n que acaba de crear.
  4. Inserte el c贸digo corto, cuando haya encontrado la animaci贸n ideal, haciendo clic en INSERTAR.
  5. Mu茅vete o luego crea tu contenido dentro del c贸digo corto as铆 generado.

Integra las animaciones css

Paso 3: verifique la representaci贸n visual

Una vez que haya generado su c贸digo corto y lo haya aplicado a su contenido, no olvide actualizar su publicaci贸n e ir al lado del visitante de su sitio para verificar si la representaci贸n final est谩 a la altura de sus esperanzas.

Aqu铆 hay un video que volar谩 sobre la gama de animaciones que podr谩 lograr con este famoso complemento:

https://www.youtube.com/watch?v = Np_t43pfrh4

Bonificaci贸n: un consejo v谩lido para ambas soluciones !

Este peque帽o truco le complacer谩, ya que puede usarse tanto para el m茅todo manual como para el complemento: es a generador de clases de animaci贸n.

Generador de clase animada

Esto significa que este generador le proporcionar谩 de inmediato los par谩metros predefinidos. Los beneficios ? No hay c贸digos cortos para usar, solo una serie de clases para aplicar sin cavar la cabeza para picarlos juntos.

En conclusi贸n

La biblioteca de animaci贸n Animate.css sin duda podr铆a ayudarlo a agregar un poco de “diversi贸n” a su sitio … Pero tenga cuidado de usarlo con moderaci贸n y prudencia porque corre el riesgo de cansar r谩pidamente a sus lectores !

cerrado

Te puede interesar:  40 fragmentos para aumentar su sitio de WordPress

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Share This