Tres formas de implementar la animación de desplazamiento en WordPress: plugins, Elementor y tutoriales CSS

animación de desplazamientoAñadir efectos dinámicos a su sitio web no sólo hace que la página parezca más atractiva, sino que también mejora la experiencia del usuario. Puede que piense que se trata de una función avanzada, pero en realidad es muy sencillo añadir animaciones de desplazamiento en WordPress. En este artículo, presentaremos una variedad de formas de implementar la animación de desplazamiento en WordPress, incluyendo el uso de la funciónplug-in (componente de software)y constructores de páginas como Elementor), y el uso deetiqueta de anclajeresponder cantando CSS Implemente efectos de animación básicos.

¿Cómo añadir animación de desplazamiento en WordPress? (diferentes métodos)

Método 1: Utilizar plug-ins Secuencia de desplazamiento

Secuencia de desplazamiento es un plugin diseñado para crear animaciones de desplazamiento. El pluginpasar (una factura o inspección, etc.)gama deimagen fijaImplemente un efecto de animación para que el usuario vea un efecto de reproducción similar al de un vídeo al desplazarse.

mover::

1. Instale y active el plugin::
   • Acceda a su panel de control de WordPress y navegue hasta Plugins > Añadir nuevo pluginSi desea instalar el plugin, busque "Scrollsequence", instale y active el plugin.

2. Acceso al menú de secuencia de desplazamiento::
   • Una vez activada, la opción Secuencia de desplazamiento aparecerá en la parte izquierda del cuadro de mandos, haga clic para acceder a este menú.

3. Preparación de la animación::
   • Utilizando un vídeo corto (5-10 segundos), el vídeo puede verse a través de una herramienta como la Ezgif) Divida el vídeo enmarco, cargue estas imágenes.

4. Creación de una nueva animación de desplazamiento::
   • En el menú de la secuencia de desplazamiento, haga clic en "Añadir una nueva secuencia de desplazamiento", cargue las imágenes y establezca la secuencia de animación.
   • Preparando la escena::
     • existe Escena se pueden añadir varias escenas (si se desea). Cada escena representa una parte de la secuencia de desplazamiento.
     • Para añadir más escenas, puede pulsar el botón situado junto a "Escena 0". + Botón.

4. Ajustes personalizados de animación::
   • Ajuste parámetros como el punto de inicio, el punto final y la dirección de desplazamiento de la animación, y seleccione el tipo de animación (pegajosa o estática).

5. Previsualizar y guardar::
   • Pulse en Vista previa para confirmar la animación y finalmente pulse en Publicar yPegue el shortcode generado en la página.

El plugin Scrollsequence es una herramienta eficaz para crear efectos interactivos para escenas que requieren animaciones de desplazamiento complejas.

Método 2: Utilizar Elementor para crear animaciones de desplazamiento

Elementor es un popular constructor de páginas para WordPress que utiliza elElementor ProSoporte para crear animaciones de desplazamiento sencillas. A continuación se muestran los pasos para implementar la animación de desplazamiento de imágenes utilizando Elementor:

1. Cree una nueva página y vaya a Elementor Edit::
   • Crear un nuevo WordPresspágina webHaga clic en "Uso del editor de Elementor"Botón

2. Insertar imagen::
   • Añada unfotografíaseleccione la imagen que desea visualizar.

3. Ajuste del tamaño de la imagen::
   • Ajuste el tamaño de la imagen según sea necesario para que sea claramente visible en la pantalla.
4. Activar efectos de movimiento::
   • Busque la opción Efectos de movimiento en la pestaña Avanzado del módulo Imagen y active el efecto de desplazamiento.

5. Ajuste de la dirección de desplazamiento::
   • Seleccione el efecto "Desplazamiento horizontal" y ajuste la dirección a "el derecho"o"hacia la izquierda", que permite que la imagen se mueva con el desplazamiento de la página.

6. Vista previa y lanzamiento::
   • Desplácese por la página para ver el efecto y publique la página tras confirmar que es correcta.

Los efectos de desplazamiento de Elementor son adecuados para necesidades de animación sencillas y requieren la versión Elementor Pro.

Método 3: Utilice etiquetas de anclaje y CSS para lograr un desplazamiento suave

Si tan sólo un simpleRotador de salto de desplazamientoPuede utilizar el HTML etiqueta de anclaje y CSS Consiga un desplazamiento suave.

mover::

1. Establecer la etiqueta de anclaje::
   • Las etiquetas de anclaje se colocan en la página para añadir un identificador único para el contenido de destino del salto (por ejemplo. id="sección1").

2. Creación de enlaces de salto::
   • Cree un enlace en la página que apunte a esa etiqueta de anclaje. Por ejemplo.<a href="#section1">Saltar a la sección</a>.

3. Añadir CSS de desplazamiento suave::
   • Añada el siguiente código a la sección "CSS personalizado" de WordPress:

html { scroll-behavior: smooth; }
html { scroll-behavior: smooth; }
html { scroll-behavior: smooth; }

Este código hará que el desplazamiento de la página sea suave y aportará una mejor experiencia de navegación a los usuarios.

alcanzar un veredicto

Las animaciones de desplazamiento son una forma eficaz de mejorar la experiencia del usuario y el atractivo visual de su sitio web WordPress. Con el plugin Scrollsequence, el constructor de páginas Elementor y un sencillo CSS de desplazamiento suave, es fácil implementar una gran variedad de efectos de animación de desplazamiento en su sitio web.