Cómo crear una animación flotante para su sitio web en WordPress










  • La animación de desplazamiento puede ser no solo un efecto genial, sino también un indicador visual de que se puede hacer clic en un elemento de la página. Se utiliza con más frecuencia para la navegación y los menús, pero también puede aumentar las tasas de clics para las imágenes o los botones de llamada a la acción.

    No desea animar todo lo que un visitante puede pasar con el puntero, pero si se usa con moderación, es un efecto agradable.

    Hay varias formas de lograr una animación flotante, pero el método más compatible es a través de CSS. También suele utilizar la menor cantidad de ancho de banda y recursos del navegador. Y usar menos recursos es la clave para mantener una buena velocidad de carga del sitio .

    La mejor manera de lograr una animación flotante en un sitio de WordPress

    Como la mayoría de las mejoras de WordPress, la mejor manera de agregar una animación flotante es con un complemento. No solo es la mejor manera, sino que también es la más fácil. Cada vez que puedo hacer lo mejor con facilidad y ganar/ganar, estoy a bordo.

    Vamos a utilizar el Animate It! complemento para la animación de desplazamiento. Hace casi todo lo que podríamos pedir, y ninguna de las funciones está oculta detrás de un muro de pago. Y los efectos de desplazamiento gratuitos en WordPress también son una victoria.

    Cualquiera que sea la pregunta, la animación no siempre es la respuesta

    Cuando un efecto es fácil de lograr, es fácil abusar de él. Un poco de animación suele ser muy útil y no es apropiado para todos los sitios. No necesariamente quiero ver una animación flotante en un sitio de noticias o en el sitio de mi banco. Puede parecer un poco frívolo en un contexto más serio.

    También vale la pena recordar que los efectos de desplazamiento se pierden en los usuarios móviles. Entonces, si la mayor parte de su tráfico son dispositivos móviles, puede que no tenga sentido dedicar tiempo a la animación flotante. Pero está vivo y bien en el escritorio, así que si tiene un lugar para él, ¡úselo!

    Bien, ¿estás listo para verlo en acción? La primera parada es la instalación del complemento.

    Nota: normalmente uso el editor Gutenberg para los tutoriales, pero el complemento solo funciona en el editor "clásico" de WordPress. Si eres un usuario de Gutenberg y no quieres cambiar de editor, este complemento no te funcionará.

    Instalación de Animate It! Enchufar

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "¡Animarlo!"

    busque WordPress Animate It!  enchufar

    Cuando encuentre el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar WordPress Animate It!  enchufar

    Ahora el complemento está instalado, pero debe activarse antes de poder usarlo.

    Haga clic en el botón "Activar".

    haga clic para activar WordPress Animate It!  enchufar

    Eso es todo al respecto. Ahora pongamos el plugin a trabajar.

    Usando Animate It!

    No hay configuración necesaria. Una vez que el complemento está instalado, está funcionando y listo para usar.

    Accede a las funciones de animación en la página y en el editor de publicaciones. Está disponible en todas sus publicaciones y páginas existentes, pero voy a crear una página desde cero.

    En el editor, verá un nuevo Animate It! icono.

    ¡Anímalo!  icono en el editor de WordPress

    Al hacer clic en él, se abre una ventana emergente. Ahí es donde configuras la animación de desplazamiento.

    Texto animado

    ¡Anímalo! coloque animaciones en un <div>. Por lo tanto, se insertará espacio encima y debajo de cualquier cosa que animes. Eso significa que no puede animar una palabra en un párrafo sin romper el formato del párrafo. También significa que la animación flotante comenzará cuando el cursor del visitante caiga en cualquier lugar dentro del <div>.

    Primero, animaremos el texto en una etiqueta <h5>. Seleccione el texto del encabezado y haga clic en ¡Anímelo! icono.

    seleccione el texto del encabezado y haga clic en ¡Anímelo!  icono

    Se abrirá la ventana emergente "Seleccione su estilo de animación".

    Hay tres pestañas o secciones, "Entrada", "Salida" y "Opciones".

    Como estamos haciendo una animación de desplazamiento, usaremos "Entrada". Eso significa que el efecto comienza cuando comienza el vuelo estacionario. Mientras que elegir "Salir" haría que el efecto comience cuando el cursor se vaya. Eso no tendría mucho sentido.

    El primer paso es elegir qué tipo de animación le gustaría en el menú desplegable "Animación".

    Menú desplegable de animación

    Como puedes ver, hay decenas de opciones. La única forma de ver lo que hacen todos es probarlos. Afortunadamente, el complemento le demostrará las animaciones.

    Seleccione el tipo de animación del menú desplegable y haga clic en el botón naranja "¡Animarlo!" botón. El ícono en la parte superior de la ventana emergente ejecutará la animación.

    demostración de animación

    No puedo mostrarte el efecto en una imagen estática, pero si estás jugando en casa, puedes verlo.

    Para que la animación se active al pasar el mouse, vamos a la pestaña "Opciones".

    En la sección "Animar en", haga clic en el botón "Pasar el cursor".

    haga clic en el botón "Pasar el cursor" en la pestaña de opciones

    Finalmente, haga clic en el botón "Insertar" para agregar el código a su página o publicación.

    haga clic en el botón "Insertar"

    Ve a tu página y pasa el mouse sobre el texto y verás el efecto.

    Imágenes animadas

    Use el mismo método para hacer una animación de desplazamiento sobre una imagen. La única diferencia es que en lugar de seleccionar el texto en el editor, seleccione la imagen.

    • Cargue una imagen o agregue una imagen existente de su biblioteca de medios a la página o publicación.
    • Seleccione la imagen en el editor.
    • Haz clic en ¡Anímalo! icono.
    • Elija el tipo de animación en el menú desplegable "Animación".
    • Vaya a la pestaña "Opciones" y en la sección "Animar en", haga clic en el botón "Pasar el cursor".
    • Haga clic en el botón "Insertar".

    Agregar animación a los widgets

    Con el complemento también puede agregar animaciones a los widgets. Debe usar un generador de clases CSS en el sitio web del complemento para hacerlo.

    Como tiene que ir a su sitio de todos modos para generar la clase, solo le indicaré su documentación para agregar animación a un widget . Es bastante fácil de implementar una vez que sepa cómo configurar la animación para una publicación o página.

    Animar un widget es un efecto extraño ya que toda el área del widget está animada. Entonces, si anima, digamos, el área de "Publicaciones recientes" en su pie de página o barra lateral, toda la sección de la página, el área del widget, se mueve.

    Tendrías que probarlo para ver el efecto, pero como dije, es raro. Pero un poco raro, dependiendo de la animación. Puede haber algunos usos extravagantes para ello, eso depende de usted.

    ¿Qué sucede si desinstala Animate It! Enchufar

    Si desinstala el complemento, las animaciones dejarán de funcionar en las páginas y publicaciones donde se usaron.

    Eso es porque, como habrás notado, el complemento genera códigos cortos para hacer la animación. Una vez que desaparecen los datos del complemento, los códigos abreviados dejan de funcionar. Los códigos abreviados se mostrarán en cualquier lugar donde se usaron, por lo que deberá eliminarlos manualmente.

    Vivir en el presente y caminar en el futuro

    La facilidad con la que podemos animar un mouse sobre ahora es impresionante cuando piensas en la web temprana. Las animaciones de "vuelco" de Javascript eran voluminosas y complicadas, por lo que generalmente era necesario usar imágenes para obtener un efecto de desplazamiento. Luego, cuando los implementó, los navegadores de algunos visitantes se negaron a mostrarlos correctamente.

    Ah, los buenos tiempos.

    Las transiciones modernas de CSS hacen que las formas antiguas se vean y se sientan como un episodio de The Flintstones . No es que haya nada malo con los 'Stones, eso sí. Pero no quiero usar una abeja en una concha marina para afeitarme la cara como lo hicieron Fred y Barney. Y no quiero usar jQuery para hacer una animación que CSS pueda hacer en unas pocas líneas.

    Ahora tienes el mejor complemento de efecto de desplazamiento para WordPress

    ¿Que vas a hacer con eso? Hay muchas posibilidades a tu alcance, muéstranos cómo las usas. El complemento también realiza animaciones que no están relacionadas con el desplazamiento, como disparar al cargar o salir de la página. Asegúrate de probar algunos de ellos.

    ¿Alguna vez ha implementado animaciones de la vieja escuela en un sitio web? ¿Puedes pensar en algún uso para la animación flotante que no discutimos? Házmelo saber en los comentarios.










  • Subir