Hoy nos informaron de una nueva actualización sobre Divi que ofrece los llamados efectos de animación de desplazamiento. Le hemos echado un vistazo y en este tutorial resumiremos lo que debe esperar.
Vamos a empezar.
¿Cuáles son los efectos de desplazamiento?
Los efectos de desplazamiento son animaciones personalizables que reaccionan a su visitantes mientras se desplazan hacia arriba y hacia abajo en la página. A diferencia de las animaciones tradicionales, los efectos de desplazamiento están directamente relacionados con el comportamiento de desplazamiento de su visitante. La velocidad y dirección de la animación se basan en la velocidad y dirección del desplazamiento del visitante. La línea de tiempo de la animación se basa en la posición del elemento en la ventana del navegador.
Suena complicado, pero con Divi, es bastante simple
Cualquier elemento se puede animar utilizando una combinación de efectos de escala, rotación, movimiento horizontal y vertical, opacidad y desenfoque. Controlas la magnitud de cada efecto en diferentes puntos de la animación, luego Divi se encarga del resto, creando hermosas transiciones a medida que estos elementos entran y se mueven dentro de su vista. visitante. Cree animaciones simples que agreguen profundidad y sofisticación sutiles, o combine efectos y anime múltiples elementos para crear espectaculares ráfagas de actividad que sorprenderán a su visitantes!
6 nuevos seis efectos únicos
Efectos disponibles para elegir o en combinaciones. Divi viene con seis efectos de desplazamiento diferentes, cada uno de los cuales se puede personalizar individualmente utilizando nuestra nueva interfaz de usuario de efectos de desplazamiento. También puede combinar cualquiera 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 según la velocidad y la dirección de desplazamiento del visitante. ¡El resultado es un efecto de paralaje! Ahora todo se puede usar para crear efectos de paralaje con Divi. Incluso puede combinar el movimiento vertical con imágenes de fondo de paralaje para crear algunos diseños realmente impresionantes.
Movimiento horizontal
El efecto de movimiento horizontal es similar al efecto de movimiento vertical, excepto que permite que los elementos se muevan de izquierda a derecha en la pantalla según la dirección y la velocidad de desplazamiento del visitante. . ¡Incluso puede combinar el movimiento vertical y horizontal, lo que le brinda un control completo sobre el movimiento de cualquier elemento!
Desenfoque contextual
El efecto de desenfoque traerá elementos dentro y fuera de foco dependiendo de la velocidad y la dirección en la que se desplaza un visitante. Dado que Divi le permite controlar los valores 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 información importante.
derretida
El efecto de desvanecimiento con elementos aparece y desaparece según la velocidad y la dirección del desplazamiento de un visitante. Puede combinar elementos, hacerlos desaparecer o ambos. La combinación de fundido, desenfoque y escala puede crear algunas animaciones realmente sofisticadas que añaden un factor extra de "eso" a sus diseños.
Efecto de escala
El efecto de escala aumentará o disminuirá el tamaño de cualquier elemento según la velocidad y la dirección del desplazamiento de un visitante. Si desea llamar la atención sobre un elemento en particular, como una llamada a la acción, puede configurar el efecto de escala para aumentar el tamaño del elemento a medida que se acerca al centro del marco. ventana. ¡Por supuesto, también hay muchas otras posibilidades!
Efecto de rotación
El efecto de rotación con rota un elemento en cualquier dirección según la velocidad y dirección de desplazamiento del visitante. La rotación sutil realmente puede dar vida a las escenas. ¡Solo un pequeño giro cuando se combina con un movimiento horizontal puede verse genial! O deja que los elementos giren en círculos.
Una nueva interfaz intuitiva.
¡La verdadera belleza de los efectos de desplazamiento de Divi es su facilidad de uso! Hay una nueva interfaz de usuario que simplifica el proceso de creación de animaciones web para que sean accesibles para todos. Con solo un clic, puede agregar o combinar uno de los seis efectos de desplazamiento de Divi. Nada más sacarlos de la caja, ¡se verán geniales! Luego, puede ajustar los efectos para crear animaciones aún más avanzadas.
¡Un clic y listo!
¿Quiere agregar un efecto de desplazamiento a un módulo? ¡Un clic agregará el efecto y se verá genial también! Para agregar un efecto de desplazamiento, simplemente acceda al nuevo grupo de opciones de Efectos de desplazamiento en la pestaña Avanzado de cualquier módulo, fila, columna o sección. Se pueden activar varios efectos al mismo tiempo y los efectos se combinarán en una animación suave que se transformará maravillosamente a medida que se desplaza.
¿Quieres un control total? lo teneis !
Una vez que haya habilitado un efecto de desplazamiento, tendrá control total sobre la magnitud del efecto en cada punto de la animación. Al controlar los valores inicial, medio y final, controlas que hace 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 en la ventana del navegador, creando una animación.
- Valor inicial - El estado de la animación inicial que se usa cuando el elemento ingresa en la parte inferior de la ventana del navegador.
- Valor intermedio - El estado de animación intermedio que se transferirá cuando el elemento se mueva al centro de la ventana.
- Valor final - El estado de animación final 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 mediano de 100 (completamente visible) y un valor final de 0 (invisible), cambiará de un estado invisible cuando ingrese ventana hasta que se vuelva 100% visible en el medio de la ventana, luego desaparecerá en un estado invisible al salir de la ventana.
Ajustar la línea de tiempo de la animación
No solo puede 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 del navegador. Cada fotograma clave de animación se puede activar en una posición diferente en la ventana gráfica. Esto le permite controlar el inicio, el final y el tiempo de la animación en función de la ubicación del elemento animado en el eje Y de la ventana del navegador.
- Posición inicial del fotograma clave - Esta opción controla el inicio de la animación. Si desea retrasar la animación, arrastre la posición del fotograma clave inicial hacia adentro.
- Posición central del fotograma clave - Esto controla el punto en el que la animación alcanza su valor de animación central. 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 en la ventana.
- Posición de fin de fotograma clave - Este control se utiliza para finalizar la animación. Si desea que la animación termine antes de que el clip salga de la ventana del navegador, puede arrastrar la posición del fotograma clave final hacia adentro.
Agrega 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 cuando pase el cursor sobre el fotograma clave del medio. A continuación, puede extender el fotograma clave del medio arrastrando sus bordes hacia adelante y hacia atrás. 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 a su valor final.
¿Qué opinas de estas nuevas funciones? No dudes en compartir tus opiniones en los comentarios.
