Las animaciones que se activan al desplazarse pueden cambiar las reglas del juego de su sitio web, mejorando su interactividad y haciendo que el contenido sea más atractivo. A medida que los usuarios se desplazan hacia abajo, las animaciones aportan profundidad a su página, captando la atención y haciendo que la experiencia de navegación sea más envolvente. Si utiliza Elementor Proañadir estas animaciones es muy sencillo. Aquí tiene una guía que le ayudará a empezar y a sacar el máximo partido a estos efectos, incluidas las animaciones de paralaje para un diseño con más capas.

¿Por qué utilizar animaciones activadas por desplazamiento?

Estas animaciones tienen algunas ventajas significativas:

• Resalte los elementos importantes: Las animaciones atraen la atención de forma natural, ayudándole a enfatizar las secciones críticas de su sitio.
• Mejorar el compromiso de los usuarios: Como el contenido se revela gradualmente, es más probable que los usuarios permanezcan comprometidos.
• Contar una historia: La forma en que se despliega el contenido puede guiar al usuario a través de su página, paso a paso, manteniendo su interés.

Con Elementor Pro, es fácil implementar estas animaciones y llevar su sitio web a vida.

Paso 1: Configurar la estructura de su página en Elementor Pro

Antes de empezar a animar, necesita establecer la estructura básica de su página. Por ejemplo, digamos que está creando una sección hero con un titular, una imagen y texto de apoyo.

Crear una nueva sección:

1. Abra Elementor, añada una nueva página y utilice Elementor Edit para ir a la página de edición.

2. Pulse el botón "Añadir nuevo contenedor" en la página.

3. Seleccione una diseño a dos columnas con el lado izquierdo para añadir contenido textual (como un título y texto de apoyo) y el lado derecho para añadir una imagen para mejorar la visualización.

Añada contenido:

1. Columna izquierda: Añadir un widget de título y un widget de texto para mostrar la información principal de la página.

2. Columna derecha: añade un widget de imagen para colocar una imagen visual relevante que añada atractivo visual a la página.

Cada bloque puede modificarse para completar los elementos deseados. Esta sencilla configuración prepara el terreno para un diseño eficaz antes de empezar a añadir la animación.

Paso 2: Añadir animación de desplazamiento a su titular

Animemos el titular para que se deslice suavemente desde la izquierda a medida que el usuario se desplaza hacia abajo.

Selección del widget de encabezado:

• Haga clic en el widget Encabezado para abrir su configuración.

Activación de los efectos de desplazamiento:

• Vaya a la pestaña Avanzado.

• En Efectos de movimientoEncienda Efectos de desplazamiento.

Ajuste del desplazamiento horizontal:

• Habilitar el desplazamiento horizontal efecto.

• Ajuste la dirección a "de izquierda a derecha.“

• Ajuste la velocidad a alrededor de 4 para un efecto suave y visible.

Vista previa:

Cuando desplace la página, verá que el titular se desliza desde la izquierda. Puede ajustar la velocidad y la dirección hasta conseguir el efecto deseado.

Paso 3: Añadir un efecto de paralaje a la imagen

Para que su página sea más dinámica, ahora añadiremos un efecto de paralaje a la imagen. La imagen se mueve a una velocidad diferente de la del texto, creando un efecto de capas y 3D.

Selección del widget de imagen:

• Haga clic en el widget Imagen y abra su configuración.

Activación de los efectos de desplazamiento:

• En la pestaña Avanzado, active Efectos de desplazamiento.

Aplicación del desplazamiento vertical:

• Active el desplazamiento vertical y fije la velocidad en torno a 1,5. Esto crea un sutil y suave efecto de paralaje, con la imagen moviéndose más lentamente que el texto.

Añadir cambios de opacidad:

• Habilite Transparencia en las opciones de desplazamiento.

• Fije el Transparencia nivel para oscilar entre 0% (totalmente transparente) a 100% (totalmente visible), permitiendo que la imagen se desvanezca gradualmente a medida que el usuario se desplaza por la página. Ajuste el control deslizante de la ventana gráfica para controlar cuándo comienza y termina el efecto de desvanecimiento, mejorando la experiencia de desplazamiento con una transición visual suave.

Esto hará que la imagen aparezca gradualmente, añadiendo profundidad a la experiencia visual.

Paso 4: Crear un visual en capas con Parallax

Para realzar aún más el diseño, puede añadir efectos de paralaje a otros elementos, como las imágenes de fondo.

Añadir una imagen de fondo:

• Haga clic en el contenedor exterior de su sección y vaya a la pestaña Estilo.

• Añada una imagen de fondo.

Activación de los efectos de desplazamiento para el fondo:

• En la pestaña Avanzado, active Efectos de desplazamiento.

• Establezca la velocidad de desplazamiento vertical en torno a 0,5, para que el fondo se mueva más despacio que los elementos en primer plano.

Vista previa:

Al desplazarse hacia abajo, verá un efecto totalmente dinámico: el titular se desliza, la imagen se mueve con un efecto de paralaje y el fondo se desplaza sutilmente hacia atrás.

Paso 5: Añadir animación de activación de desplazamiento para el texto

Seleccione el widget de texto:

• Pulse el botón cuadro de texto para entrar en la interfaz de configuración del texto.

Active el efecto de desplazamiento:

1. Ir a el Avanzado ficha.
2. En Efectos de movimiento, habilitar Desplazamiento Efectos.

Seleccione el Transparencia para crear un efecto de difuminado en el texto.

Establezca la animación de transparencia:

• Ajuste el rango de transparencia de 0% (totalmente transparente) a 100% (totalmente visible). El texto pasará de transparente a visible a medida que el usuario se desplace por la página, creando una transición suave.

Establezca el punto de activación:

• En el Efecto de desplazamiento puede ajustar la Viewport Porcentaje para especificar dónde empieza y termina la animación el desplazamiento. Por ejemplo, configurar la animación para que se active cuando el usuario se desplace entre 20% y 80% de la página permite que el texto aparezca junto con el contenido de la página.

Paso 6: Añadir efecto deslizante

Seleccione el efecto Presentación:

• En virtud del Avanzado > Efectos de movimiento seleccione En la animacióny seleccione Deslizar en el menú desplegable.

• Puede elegir Deslizar desde la izquierda, Deslizar desde la derecha o Deslizar desde abajo hacia arriba, en función de sus necesidades de diseño.

Esto se aplica a todos los escenarios en los que desee mejorar el atractivo visual de una página web y la interactividad con el usuario.

Paso 7: Optimizar la experiencia del usuario

Las animaciones activadas por desplazamiento pueden mejorar significativamente un sitio web, pero debe mantener la experiencia del usuario sin problemas. He aquí algunos consejos:

Que sea sencillo: Demasiadas animaciones pueden abrumar al usuario. Limítese a unos pocos efectos bien colocados para mantener un aspecto profesional.

Optimización móvil: No todas las animaciones funcionan bien en dispositivos móviles. En Elementor Pro, puede desactivar animaciones específicas para móviles y tabletas para mantener el sitio responsivo y fácil de usar.

Pruebas entre navegadores: Las animaciones de desplazamiento pueden comportarse de forma diferente en los distintos navegadores. Pruebe siempre su diseño en los navegadores más populares para garantizar la coherencia.

Conclusión

Las animaciones activadas por desplazamiento y los efectos de paralaje pueden transformar su sitio web, haciéndolo más atractivo y atrayente visualmente. Con las funciones de Elementor Pro, puede implementar desde sutiles animaciones de texto hasta complejos diseños por capas. Cuando se hacen bien, estos efectos guían la atención del usuario, cuentan una historia a través de su contenido y crean una experiencia de navegación fluida en todos los dispositivos.

Siguiendo estos pasos, podrá crear páginas web dinámicas y envolventes que cautiven a los usuarios, manteniendo al mismo tiempo un diseño funcional y receptivo.