El arte de contar historias podría haber comenzado mucho antes de que el homo sapiens pudiera hablar. Evoluciona con nosotros y se adapta a las herramientas disponibles. Las historias que solían contarse y transmitirse de una generación a otra abarcaban la evolución literal de los libros escritos a mano, la impresión masiva, el procesamiento digital de textos y, recientemente, Internet. Desde el punto de vista de la evolución humana, parece que no hemos aprovechado todo el potencial de todas las tecnologías disponibles que tenemos hoy. Si bien los videos ya han comenzado sus campañas de dominación del mundo virtual, la mayoría del contenido de la web todavía está en texto.
El contenido web moderno debe ser interactivo e incorporar varios medios junto con un buen texto sin formato. Algunas herramientas pueden ayudarnos a mejorar nuestra narración algunas muescas. Y si es un usuario de WordPress, puede utilizar el ¡Anímalo! complemento para agregar animaciones CSS3 geniales a su contenido.
¿Cuáles son las posibilidades?
Junto con HTML5, CSS3 es el acrónimo relacionado con el diseño web moderno. En pocas palabras, CSS es el componente web que permite a los usuarios controlar la apariencia de la página web, como el diseño, la posición, la fuente, el color, etc. Su última encarnación, CSS3, es lo suficientemente inteligente como para permitir a los usuarios crear imágenes y animaciones usando códigos.
Afortunadamente, no tiene que ser un codificador para utilizar CSS3 en su sitio de WordPress. ¡Animate It! El complemento le permite aplicar animaciones CSS3 a publicaciones, widgets y páginas con solo hacer clic en un botón del editor. Además, los usuarios pueden controlar los disparadores. Por ejemplo, pueden aplicar animación al desplazarse, hacer clic y desplazarse, y agregar diferentes desplazamientos de desplazamiento en bloques de animación individuales. El complemento también viene con toneladas de características, como:
- Más de 50 animaciones de entrada, salida y búsqueda de atención
- Proporciona función de retraso y control de duración en la animación para crear una secuencia de animación agradable
- Permitir que los usuarios apliquen animación infinitamente o cualquier número fijo de veces
- Opción para agregar clases CSS personalizadas a un bloque de animación individual
- Opciones para habilitar o deshabilitar animaciones en teléfonos inteligentes y tabletas
¿Qué puedes hacer con Animate It! ¿enchufar? Puede agregar interactividades simples a sus artículos, crear páginas de ventas atractivas, profundizar las emociones de sus ficciones o incluso crear una presentación comercial poderosa si lo desea. Solo recuerde no exagerar, ya que bombardear a su visitante con animación ilimitada no es la mejor manera de obtener lectores leales.
Introducción a Animate It!
Después de instalar y activar el complemento, puede encontrar el botón para agregar animación en el «Editor de WordPress». Este botón solo aparecerá en el modo visual, pero si ha aprendido los comandos, es posible insertar los códigos desde el modo de texto sin formato (más sobre esto más adelante).
Después de presionar el botón, aparecerá una ventana de opciones. Hay tres pestañas que le permiten personalizar la animación. La primera pestaña es «Entrada». Este es el lugar para agregar la animación que ingresará a la pantalla en ciertas condiciones. Cuatro opciones desplegables le ayudarán a ajustar los efectos de animación.
- Animación es el lugar para elegir qué tipo de animación desea.
- Demora le ayudará a ajustar el tiempo antes de que comience la animación.
- Duración se trata de cuánto tiempo se reproducirá la animación de principio a fin. Cuanto mayor sea el número, más lenta será la animación.
- Momento es la proporción de la animación que se reproducirá a la vez. Por ejemplo, el efecto «easyIn» reproducirá la animación más lentamente al principio y más rápido hacia el final.
Puedes ver las combinaciones de efectos jugándolo usando el botón «¡Anímalo!» botón. Si el resultado es de su agrado, puede presionar el botón “Insertar” para usarlo en su contenido.
La pestaña “Salida” es más o menos similar a la Entrada, pero para agregar una animación que saldrá de la pantalla. Al combinar los dos, puede agregar un objeto que aparecerá en la pantalla y luego desaparecerá.
La pestaña «Opciones» es donde controlas la configuración general de la animación. Aquí puede configurar la animación para que se reproduzca en un bucle o solo una vez, mantener el estado final del elemento, agregar código CSS personalizado y configurar el disparador que iniciará la animación. Específicamente sobre el disparador, la configuración «Animar activado», puede elegir Desplazarse, por ejemplo, y la animación solo comenzará si el área ya está visible en la pantalla.
Agregar su contenido
Después de presionar el botón «Insertar», verá algunas líneas de códigos cortos agregados a su área de contenido. Estos códigos cortos son los que controlarán la animación. Y dado que son solo códigos con valores, puede agregar los códigos manualmente si es bueno con los códigos y lo desea. Sin embargo, otras personas deberían seguir con Animate It! botón.
También verá una línea de texto que dice «Agregue su contenido en esta área.”Aquí es donde puede agregar los elementos que desea animar. Puede ser texto, imágenes, íconos, logotipos, audios, videos o incluso otros códigos cortos. Intenté agregar un código corto de efecto escrito generado con el complemento Typed Js, y el resultado es excelente.
Si hay algo que pueda decir sobre el uso de Animate It! plugin, sería «¡Experimente!» Juega con él y prueba diferentes combinaciones para obtener el resultado que deseas. Es divertido. Y aquí está el resultado que obtuve en menos de un minuto. Combiné el Animate It! complemento con el complemento Typed Js.
¿Crees que es hora de agregar elementos interactivos a tu contenido web? ¿Estás pensando en probar el complemento? ¿Usas diferentes complementos para la animación? Comparte usando los comentarios a continuación.