En este tutorial te explicaremos a fondo que es la opción de Divi: Divi Scroll Effects y como puedes usarla e implementarla en tu sitio web. Muchos usuarios de Divi me han preguntado como se usa esta herramienta que tuvimos en la actualización de Divi del 5 de febrero de 2020, y pues bien, elaboramos este tutorial detallado donde te guiamos paso a paso para entender esta poderosa opción de Divi.

Tiempo de lectura estimado: 4 minutos

Índice

¿Que es Divi Scroll Effects?

Los Divi Scroll Effects son una opción que integró ET en una de las últimas actualizaciones importante de Divi. Esta opción te permite configurar de manera “no tan sencilla” efectos de desplazamiento a todos los elementos que desees dentro de Divi.

Esta opción te permite crear animaciones y transiciones avanzadas que reaccionan al scroll que hacen tus usuarios a medida que se desplazan hacia arriba y hacia abajo de la página.

A diferencia de las animaciones tradicionales, los efectos de desplazamiento están directamente relacionados con el comportamiento de desplazamiento o scroll que pueden hacer los usuarios de tu sitio web. 

La velocidad y la dirección de la animación se basa en qué tan rápido y en qué dirección se desplaza el usuario. La línea de tiempo de la animación se basa en la posición del elemento dentro de la ventana del navegador, o lo que llamamos en el tutorial “viewport”.

ET integró seis tipos de Divi Scroll Effects únicos

Divi Scroll Effect viene con seis efectos de desplazamiento diferentes, cada uno de los cuales se puede personalizar individualmente usando una nueva interfaz de usuario de efectos de desplazamiento, que particularmente, siempre cuestan entender al principio. Algo muy interesante es que también se pueden combinar cualquiera estos seis tipos de los efectos para crear animaciones más complejas.

Movimiento vertical

El efecto de movimiento vertical permite que cualquier elemento se mueva hacia arriba y hacia abajo en la página en función de la velocidad y la dirección que se desplaza un usuario.

Movimiento horizontal

El efecto de movimiento horizontal es como el efecto de movimiento vertical, excepto que permite que los elementos se muevan hacia la izquierda y hacia la derecha en la pantalla según la dirección y la velocidad que se desplaza un usuario.

Difuminar o desenfoque

El efecto de desenfoque enfocará o desenfocará elementos del sitio web en función de la velocidad y la dirección en la que se desplaza un usuario.

Desvanecimiento

El efecto de desvanecimiento hará que los elementos del sitio web aparezcan y desaparezcan en función de la velocidad y la dirección en la que se desplaza un usuario.

Escalado

El efecto de escala aumentará o disminuirá el tamaño de cualquier elemento según la velocidad y la dirección en la que se desplaza un usuario.

Rotación

El efecto de rotación hace rotar un elemento en cualquier dirección en función de la velocidad y la dirección que se desplaza un usuario.

Al controlar los valores inicial, medio y final, controlas lo que hace la animación. Una vez que se establecen los valores, Divi se encarga del resto y hará la transición del elemento a medida que hay scroll en la ventana del navegador, creando así una animación personalizada.

Lo que no me gusta: interfaz poco intuitiva.

Uno de los puntos más flacos, al menos al principio, es la interfaz de control de los efectos y animaciones, pues de entrada no es completamente intuitiva, y tampoco está traducida al español por completo, pero bueno, justo para eso grabamos el video, donde explicamos detenidamente como usar cada uno de los elementos de esta interfaz.

Hay tres capas de selectores que puedes oprimir, y cada uno de ellos te da una función especifica, qué, tienes que probar al menos dos o tres veces para entender su funcionamiento.

Concluciones:

Divi Scroll Effects o efectos de desplazamiento de Divi es una gran función que podría hacer que tu sitio web realmente marque la diferencia en si diseño y dinamismo con respecto a otros diseños, pero la curva de aprendizaje de esta opción no es la más rápida. Te recomendamos que te armes de un poco de tiempo y paciencia, hagas diferentes pruebas, y una vez consigas el efecto que deseas para tu diseño, lo establezcas en un “Preset o prediseño” de manera que luego lo puedas usar sin problema en otros elementos.

¿Qué opinas de está opción? ¿Qué es lo que te ha resultado más complicado con ella? Queremos saber que piensas, déjanos tus comentarios en la parte inferior de este post.

¡Nos vemos en la próxima!