Los Efectos de Desplazamiento de Divi permiten crear animaciones y transiciones que se activan a medida que los visitantes se desplazan hacia arriba y hacia abajo por la página.

Los Efectos de Desplazamiento de Divi permiten crear animaciones y transiciones que se activan a medida que los visitantes se desplazan hacia arriba y hacia abajo por la página.

No se necesita ningún código CSS o JavaScript complicado. Con los Efectos de Desplazamiento de Divi, crear las transiciones y animaciones impresionantes que tu sitio web necesita es fácil.

¿Qué son los Efectos de Desplazamiento?

Los Efectos de Desplazamiento son animaciones personalizables que reaccionan al desplazamiento de los visitantes en la página. A diferencia de las animaciones tradicionales, estos efectos están directamente ligados al comportamiento de desplazamiento del usuario.

La velocidad y dirección de la animación dependen de la rapidez y sentido en el que se desplace el visitante.

La línea de tiempo de la animación se basa en la posición del elemento dentro del área visible del navegador. Cualquier elemento puede animarse combinando escala, rotación, movimiento horizontal y vertical, opacidad y efectos de desenfoque.

Tú controlas la magnitud de cada efecto en distintos puntos durante la animación. Luego, Divi se encarga del resto, creando transiciones hermosas a medida que los elementos entran y se desplazan por la vista del usuario.

Puedes crear animaciones simples que aportan profundidad y sofisticación sutil, o combinar múltiples efectos para animar varios elementos y lograr explosiones espectaculares de actividad que asombrarán a tus visitantes.

Dónde encontrar los Efectos de Desplazamiento de Divi

Los Efectos de Desplazamiento están disponibles en todas las Secciones, Filas, Columnas y Módulos.

• Abre la ventana de configuración del elemento con el que estés trabajando.

• Ve a la pestaña Avanzado → Efectos de Desplazamiento.

Explicación de todas las Opciones de Efectos de Desplazamiento

Para aplicar un efecto de desplazamiento, navega al efecto deseado y haz clic en el interruptor para activarlo. Esto mostrará los controles detallados donde podrás ajustar cada efecto.

Posición Fija (Sticky)

Elige si el elemento debe permanecer a una distancia fija del borde superior o inferior de la ventana del navegador mientras el usuario se desplaza.

• Haz clic en el menú desplegable.

• Selecciona cualquiera de las siguientes opciones:

  • No Fijo – El elemento no será fijo.

  • Fijar en la Parte Superior – El elemento se fijará cuando llegue al borde superior.

  • Fijar en la Parte Inferior – El elemento se fijará cuando llegue al borde inferior.

  • Fijar en la Parte Superior e Inferior – El elemento se mantendrá fijo entre ambos bordes.

Efectos de Transformación por Desplazamiento

Aquí puedes elegir entre 6 animaciones basadas en el comportamiento de desplazamiento del usuario. La animación comienza cuando el elemento entra en el área visible del navegador y termina cuando sale.

Movimiento Vertical

Permite que cualquier elemento se mueva hacia arriba o abajo según la velocidad y dirección del desplazamiento del usuario. ¡El resultado es un efecto parallax!

Ahora cualquier cosa puede usarse para crear efectos parallax con Divi. Puedes combinar movimiento vertical con fondos parallax para crear diseños increíbles.

Movimiento Horizontal

Similar al movimiento vertical, pero permite mover los elementos hacia la izquierda o derecha dependiendo del desplazamiento. Puedes combinarlos para tener control total sobre el movimiento del elemento.

Aparición y Desaparición (Fade)

Este efecto hace que los elementos aparezcan o desaparezcan mientras se desplaza el usuario. Puedes usarlo para hacer que los elementos se desvanezcan al entrar o salir del área visible. Al combinarlo con desenfoque y escala, puedes crear animaciones muy sofisticadas.

Escalar

El efecto de escala cambia el tamaño del elemento según la dirección y velocidad del desplazamiento. Ideal para llamar la atención sobre elementos clave, como llamadas a la acción, aumentando su tamaño cuando se acercan al centro de la pantalla.

Rotación

Permite que un elemento gire hacia un lado u otro, dependiendo del desplazamiento. Una rotación sutil puede realzar la experiencia visual. Puedes hacer que gire ligeramente o que rote continuamente.

---

Desenfoque

El efecto de desenfoque ajusta el enfoque del contenido según el desplazamiento. Puedes controlar el desenfoque inicial, medio y final para resaltar información clave en el momento justo.

Controles de los Efectos de Desplazamiento

Los siguientes controles te dan precisión en el tiempo y duración del efecto:

• Vista Inferior del Navegador (Viewport Bottom): Controla cuándo inicia la animación.

• Vista Media del Navegador (Viewport Middle): Ajusta la línea de tiempo entre el inicio y fin.

• Vista Superior del Navegador (Viewport Top): Controla cuándo finaliza la animación o cuándo comienza en desplazamiento inverso.

Opciones adicionales:

• Activar Movimiento Vertical: Sí para activarlo.

  • Desfase Inicial: Estado del elemento al entrar en la vista.

  • Desfase Medio: Cuánto se desplaza el elemento al estar en el centro.

  • Desfase Final: Visibilidad del elemento al salir de la vista.

Consejos y Buenas Prácticas para Usar los Efectos de Desplazamiento de Divi

• Usar Efectos para Resaltar Contenido Importante: Dirige la atención del visitante.

• Usar Múltiples Efectos, pero con Moderación: Evita sobrecargar la experiencia.

• Crear Animaciones Estáticas: Puedes agregar pausas al extender la duración del efecto central.

  • Haz clic en las flechas dobles sobre el fotograma medio.

  • Extiende los bordes del fotograma para alargar su duración.

Continúa Aprendiendo

• Cómo diseñar un reloj animado con los Efectos de Desplazamiento de Divi

• Cómo combinar texto y desplazamiento con configuración de posición

• Crea una lista de portafolio desplazable con Divi

• Cómo limitar los Efectos de Desplazamiento a columnas específicas

• Cómo diseñar una línea de tiempo en Divi usando Efectos de Desplazamiento