Scroll-triggered animations can be a game-changer for your website, enhancing its interactivity and making the content more engaging. As users scroll down, animations bring depth to your page, grabbing attention and making the browsing experience more immersive. If you’re using Elementor Pro, adding these animations is straightforward. Here’s a guide to help you get started and make the most of these effects, including parallax animations for a more layered design.
¿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, it’s easy to implement these animations and bring your website to vida.
Paso 1: Configurar la estructura de su página en Elementor Pro
Before you start animating, you need to set up the basic structure of your page. For example, let’s say you’re creating a hero section with a headline, an image, and supporting text.
Crear una nueva sección:
- Abra Elementor, añada una nueva página y utilice Elementor Edit para ir a la página de edición.
- Click the “Añadir nuevo contenedor” button on the page.
- 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:
- Columna izquierda: Añadir un widget de título y un widget de texto para mostrar la información principal de la página.
- 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
Let’s animate the headline so it smoothly slides in from the left as the user scrolls down.
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.
- Set the direction to “de izquierda a derecha."
- Ajuste la velocidad a alrededor de 4 para un efecto suave y visible.
Vista previa:
When you scroll the page, you’ll see the headline slide in from the left. You can tweak the speed and direction until you get the desired effect.
Paso 3: Añadir un efecto de paralaje a la imagen
To make your page more dynamic, we’ll now add a parallax effect to the image. The image moves at a different speed from the text, creating a layered, 3D-like effect.
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:
As you scroll down, you’ll see a fully dynamic effect: the headline slides in, the image moves with a parallax effect, and the background shifts subtly in the back.
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:
- Ir a el Avanzado ficha.
- 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.
This applies to all scenarios where you want to enhance a web page’s visual appeal and user interactivity.
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
Scroll-triggered animations and parallax effects can transform your website, making it more engaging and visually appealing. With Elementor Pro’s features, you can implement anything from subtle text animations to complex, layered designs. When done right, these effects guide the user’s attention, tell a story through your content, and create a seamless browsing experience across all devices.
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.