Divi Scroll Effects: qué son y cómo usarlos

Los Divi Scroll Effects son una de las funciones más llamativas del constructor — y una de las más infrautilizadas por su curva de aprendizaje inicial. Permiten que cualquier elemento reaccione al scroll del usuario con animaciones fluidas de movimiento, opacidad, escala, rotación y desenfoque. En esta guía te explicamos los 6 tipos, cómo interpretar la interfaz y cuándo conviene no usarlos.

Ver Demo en vivo →

Scroll Effects vs Animations: ¿en qué se diferencian?

Divi tiene dos sistemas de animación distintos que se confunden con frecuencia:

Las Animations son más simples de configurar y suficientes para la mayoría de los casos. Los Scroll Effects dan más control pero requieren más tiempo de configuración y prueba.

Los 6 tipos de Divi Scroll Effects

1. Movimiento vertical

El elemento se mueve hacia arriba o hacia abajo mientras el usuario hace scroll. Es el efecto parallax más clásico: imágenes de fondo que se mueven más lento que el contenido, elementos que "flotan" a diferente velocidad que la página.

Uso típico: imágenes decorativas, elementos SVG en fondos de sección, capas de una composición visual en profundidad.

2. Movimiento horizontal

El elemento se mueve hacia la izquierda o la derecha en función del scroll vertical del usuario. Funciona bien para textos de gran tamaño que se deslizan horizontalmente como un ticker, o para elementos que entran desde los lados de la pantalla.

Uso típico: logos de clientes en un strip horizontal, elementos decorativos de bordes, títulos oversized.

3. Desenfoque (Blur)

El elemento va de enfocado a desenfocado (o viceversa) según la posición del scroll. Crea un efecto de profundidad de campo que simula fotografía con bokeh, o una transición de "materialización" donde el elemento aparece gradualmente nítido.

Uso típico: imágenes de fondo de secciones hero que se difuminan al hacer scroll, elementos secundarios que se desvanecen hacia el fondo.

4. Desvanecimiento (Fade)

El elemento pasa de invisible (opacidad 0) a visible (opacidad 1) o al revés, sincronizado con el scroll. Es el efecto más sutil y versátil — casi cualquier elemento puede beneficiarse de un fade ligero.

Uso típico: textos de introducción que aparecen al llegar a la sección, imágenes que se revelan progresivamente.

5. Escalado (Scale)

El elemento crece o se reduce según la posición del scroll. Un elemento que empieza pequeño y crece al hacer scroll crea sensación de acercamiento. El efecto contrario (zoom-out) da sensación de alejamiento o de que el elemento "vuela" hacia atrás.

Uso típico: imágenes de producto que se agrandan al ser el foco de atención, CTAs que crecen ligeramente al llegar al área de conversión.

6. Rotación

El elemento rota en la dirección y velocidad que defines. Es el efecto más llamativo y el más fácil de abusar — úsalo con moderación y preferentemente en elementos gráficos pequeños, no en bloques de texto.

Uso típico: íconos decorativos que giran lentamente, estrellas o formas geométricas decorativas, engranajes en sitios de tecnología.

Cómo funciona la interfaz: valores inicial, mid y final

Cada Scroll Effect tiene tres puntos de control que definen el estado del elemento en diferentes posiciones del scroll:

• Valor inicial (Start): el estado del elemento cuando entra al viewport desde abajo.
• Valor medio (Mid): el estado del elemento cuando está centrado en el viewport.
• Valor final (End): el estado del elemento cuando sale del viewport por arriba.

Divi hace la transición automáticamente entre estos tres puntos a medida que el elemento se desplaza por el viewport. La velocidad de la animación no se define en tiempo, sino que depende directamente de qué tan rápido hace scroll el usuario.

Por ejemplo, para un movimiento vertical suave hacia arriba:

• Start: 50px (el elemento empieza 50px hacia abajo de su posición natural)
• Mid: 0px (en el centro del viewport está en su posición normal)
• End: -50px (sale 50px hacia arriba de su posición natural)

Cómo combinar múltiples Scroll Effects

Puedes activar varios efectos simultáneamente en el mismo elemento. Los efectos se aplican en capas, por lo que puedes combinar, por ejemplo:

• Movimiento vertical + fade: el elemento sube mientras aparece gradualmente.
• Escala + desenfoque: crece desde pequeño y difuso hasta su tamaño completo y nítido.
• Movimiento horizontal + rotación: se desliza desde el lado mientras rota suavemente.

La clave al combinar es mantener los valores de cada efecto pequeños. Si cada efecto individual es sutil, la combinación se siente sofisticada. Si exageras cada uno por separado, el resultado es caótico.

Restricción por dispositivo: desktop vs móvil

Divi permite activar los Scroll Effects independientemente para desktop, tablet y móvil. Esto es importante porque los efectos de parallax y movimiento en móvil frecuentemente se ven mal o degradan el rendimiento en dispositivos de gama media-baja.

La práctica recomendada es activar los efectos solo en desktop y desactivarlos en tablet y móvil, a menos que hayas probado específicamente que funcionan bien en esos breakpoints.

Cómo guardar un Scroll Effect como Preset

Una vez que configuras un Scroll Effect que te gusta, puedes guardarlo como preset de Divi para reutilizarlo en otros módulos. En el panel de opciones del módulo, haz clic en el ícono de "guardar como preset" y dale un nombre descriptivo (ej: "Parallax suave hacia arriba"). A partir de ahí puedes aplicarlo a cualquier elemento con un solo clic.

¿Quieres crear diseños animados y visualmente impactantes con Divi? Explora nuestro curso completo de Divi 5 o accede a todos los tutoriales con el plan de membresía UXDivi.

Cuándo NO usar Divi Scroll Effects

Los Scroll Effects son una herramienta poderosa que puede volverse contraproducente si se aplica sin criterio:

• Texto largo: animar párrafos completos con movimiento o desenfoque hace la lectura incómoda e ilegible mientras el usuario hace scroll.
• Elementos críticos de conversión: un botón de compra o un formulario que se mueve o se desvanece genera confusión. Las animaciones deben ser decorativas, no funcionales.
• Sitios con usuarios mayores o con sensibilidad al movimiento: las animaciones de parallax y movimiento intenso pueden causar mareos. Respeta la media query prefers-reduced-motion para usuarios que han configurado esta preferencia en su sistema operativo.
• Móvil con bajo rendimiento: los efectos de parallax consumen recursos del GPU. En dispositivos de gama media-baja, activarlos puede causar jank (tartamudeo visual) que empeora la experiencia.

Preguntas frecuentes sobre Divi Scroll Effects

¿Los Scroll Effects afectan el SEO?

No directamente. Son efectos visuales aplicados con CSS y JavaScript en el cliente. Google no evalúa las animaciones al crawlear la página. Indirectamente, si los efectos causan una experiencia de usuario pobre (layout shift, bajo rendimiento en móvil), pueden afectar el Core Web Vitals y el CLS (Cumulative Layout Shift).

¿Puedo usar Scroll Effects en secciones completas?

Sí. Los Scroll Effects se pueden aplicar a secciones, filas, columnas y módulos individuales. Aplicarlos a secciones completas genera efectos de parallax a gran escala, similar a lo que se logra con la opción de imagen de fondo parallax de Divi, pero con más control sobre los valores.

¿Los Scroll Effects funcionan igual en Divi 5?

Divi 5 tiene una arquitectura completamente nueva basada en React, pero los Scroll Effects siguen disponibles. La interfaz de configuración puede tener cambios visuales, pero la lógica de valores inicial/mid/final es la misma.

¿Cómo evito el efecto de "salto" al cargar la página?

El salto ocurre cuando el elemento está en el estado inicial del Scroll Effect (por ejemplo, con opacidad 0) y el JavaScript de Divi tarda un instante en calcular la posición. Para minimizarlo, evita valores extremos en el estado inicial y asegúrate de que Divi Builder esté cargando correctamente sin conflictos de JavaScript.

Conclusión

Los Divi Scroll Effects añaden una capa de dinamismo que diferencia un sitio web de uno estático. La clave para usarlos bien es empezar con valores pequeños, probar en todos los dispositivos antes de publicar, y recordar que el objetivo es mejorar la experiencia del usuario, no demostrar que puedes hacer animaciones complejas. Una vez que dominas la lógica de los tres puntos de control (inicio, medio, final), la curva de aprendizaje desaparece y los efectos se vuelven intuitivos.

Para más recursos sobre animaciones y diseño avanzado con Divi, explora nuestro tutorial sobre menú fijo con enlace activo en Divi o descubre todos los tutoriales premium de UXDivi.