A partir de hoy vs a poder hacer efectos alucinantes cuándo tus potenciales clientes hagan scroll en tu página. O lo que es lo mismo, naveguen hacia abajo o hacia arriba en cualquiera de las páginas de tu web.
IMPORTANTE: Si quieres descargar esta y futuras versiones de Divi gratis y aprender Divi con mi ayuda apúntate hoy mismo a mi Curso de Divi
Índice del artículo
¿Quieres ver lo que es posible? Echa un vistazo a esta demostración para inspirarte:
VER LA DEMOSTRACIÓN DE EFECTOS DE DESPLAZAMIENTO
¿Qué son los efectos de desplazamiento o scroll?
Los efectos de desplazamiento son animaciones personalizables que reaccionan a sus visitantes a medida que se desplazan hacia arriba y hacia abajo en la página.
Suena complicado, ¡pero Divi lo hace súper fácil!
Cualquier elemento puede ser animado usando una combinación de escala, rotación, movimiento horizontal y vertical, opacidad y efectos de desenfoque.
¡Crea animaciones simples que agreguen profundidad y sofisticación sútil, o combina efectos y anima múltiples elementos para crear espectaculares explosiones de actividad que sorprenderán a tus visitantes!
Seis efectos de scroll de Divi
Divi viene con seis efectos de desplazamiento diferentes, cada uno de los cuales se puede personalizar individualmente. También puedes combinar cualquiera de los efectos para crear animaciones más complejas.
Efecto scroll de Divi: Movimiento vertical
El efecto de movimiento vertical permite que cualquier elemento se mueva hacia arriba y hacia abajo de la página en función de la velocidad y la dirección que se desplaza un visitante.
¡El resultado es un efecto de paralaje! Ahora se puede usar cualquier cosa para crear efectos de paralaje con Divi. Incluso puedes combinar el movimiento vertical con imágenes de fondo de paralaje para crear diseños realmente impresionantes.
Efecto scroll de Divi: 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 a través de la pantalla en función de la dirección y la velocidad que se desplaza un visitante.
¡Incluso puedes combinar el movimiento vertical y horizontal, dándole un control completo sobre el movimiento de cualquier elemento!
Efecto scroll de Divi: Difuminar (blur)
El efecto de desenfoque añade elementos basados en la velocidad y dirección que se desplaza un visitante.
Dado que Divi permite controlar el valor de desenfoque inicial, medio y final, puede enfocar los elementos justo cuando están frente a los ojos del visitante. Es una excelente manera de llamar la atención sobre piezas importantes de información.
Efecto scroll de Divi: Desvanecerse (fade)
El efecto de desvanecimiento con elementos de desvanecimiento de entrada y salida basados en la velocidad y la dirección que se desplaza un visitante.
La combinación de desvanecimiento, desenfoque y escala puede crear algunas animaciones realmente sofisticadas.
Efecto scroll de Divi: Escala
El efecto de escala aumentará o disminuirá el tamaño de cualquier elemento en función de la velocidad y la dirección que se desplaza un visitante.
Si deseas llamar la atención sobre un elemento en particular, como una llamada a la acción, puedes configurar el efecto de escala para aumentar el tamaño del elemento a medida que se acerca al centro de la ventana gráfica.
Efecto scroll de Divi: Rotación
El efecto de rotación con rotar un elemento en cualquier dirección en función de la velocidad y la dirección que se desplaza un visitante.
La rotación sutil realmente puede dar vida a las escenas. ¡Solo un poco de rotación cuando se combina con el movimiento horizontal puede verse genial!
Una nueva interfaz intuitiva ¡Más fácil de lo que parece!
¡La verdadera belleza de los efectos de desplazamiento de Divi es lo fáciles que son de usar!
Con un solo clic, puedes agregar o combinar cualquiera de los seis efectos de desplazamiento de Divi.
Un clic y eso es todo!
Para agregar un efecto de desplazamiento, simplemente ve al nuevo grupo de opciones de Efectos de desplazamiento dentro de la pestaña Avanzado de cualquier módulo, fila, columna o sección.
Se pueden habilitar múltiples efectos a la vez y los efectos se combinarán en una sola animación suave que se transita maravillosamente a medida que se desplaza.
¿Quieres control total sobre el scroll? ¡También lo tienes!
Una vez que habilitas un efecto de desplazamiento, tienes control total. 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 se mueve a través de la ventana del navegador, creando así una animación.
- Valor inicial: el estado de animación inicial que se utiliza cuando el elemento ingresa en la parte inferior de la ventana del navegador.
- Valor medio: el estado de animación del medio al que se hará la transición a medida que el elemento se mueva hacia el centro de la ventana gráfica.
- Valor final: el estado final de la animación que se produce cuando el elemento sale de la ventana del navegador en la parte superior de la pantalla.
Por ejemplo, un efecto de opacidad con un valor inicial de 0 (invisible), un valor medio de 100 (totalmente visible) y un valor final de 0 (invisible), pasará de un estado invisible a medida que ingresa a la ventana gráfica hasta que se convierte en 100% visible en el medio de la ventana gráfica, y luego se desvanecerá a un estado invisible cuando salga de la ventana gráfica.
Ajustar la línea de tiempo de animación
No solo puedes ajustar los valores de la animación, sino que también puede ajustar la línea de tiempo de la animación.
La interfaz de usuario de la línea de tiempo representa la altura de la ventana gráfica del navegador.
Cada fotograma clave de animación se puede activar en una posición diferente dentro de la ventana gráfica.
Esto permite controlar cuándo comienza la animación, cuándo termina y el momento del valor de la animación central en función de dónde existe el elemento animado dentro del eje y de la ventana de visualización del navegador.
- Posición de fotograma clave inicial : controla cuándo comienza la animación. Si desea retrasar la animación, arrastre la posición del cuadro clave inicial hacia adentro.
- Posición media del fotograma clave : controla el punto en el que la animación alcanza su valor medio de animación. No tiene que estar exactamente en el medio de la línea de tiempo de la animación. Puede mover el fotograma clave del medio a cualquier posición dentro de la ventana gráfica.
- Posición final del fotograma clave : este control cuando finaliza la animación. Si desea que la animación finalice antes de que el elemento abandone la ventana gráfica del navegador, puede arrastrar la posición final del fotograma clave hacia adentro.
Agregar estados estáticos a cualquier animación
También puede agregar pausas a sus animaciones aumentando la duración de su valor de efecto medio estático. Para crear una duración de animación estática, haga clic en las dos flechas al pasar el mouse sobre el fotograma clave central. Luego puede extender el fotograma clave central arrastrando sus bordes en cualquier dirección. Durante este punto de la animación, el elemento permanecerá estático. Una vez que finaliza la duración estática, la animación continuará la transición hacia su valor final.
