Cómo transformar su diseño con velocidad de desplazamiento usando Divi y GSAP

Cuanto más se familiarice con Divi, más se dará cuenta de que es una herramienta muy flexible. Le permite sumergirse directamente en el diseño de una página sin tener que pasar primero por otras aplicaciones de diseño. También sienta las bases para que pueda crear experiencias aún más avanzadas con algunas de sus funciones integradas, como efectos de desplazamiento y opciones adhesivas. Ahora bien, aunque estas son funciones bastante poderosas por sí mismas, tienen sus límites. Límites que puede superar fácilmente si utiliza bibliotecas externas. En el tutorial de hoy, por ejemplo, le mostraremos cómo transformar su diseño con velocidad de desplazamiento usando Divi, GSAP y ScrollTrigger para GSAP. A medida que nos desplazamos hacia abajo en el diseño, ciertos elementos se transformarán según la velocidad que esté utilizando para desplazarse, lo que conduce a una experiencia altamente interactiva. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Sesgo vertical

Escritorio

Móvil

Sesgo horizontal

Escritorio

Móvil

Girar

Escritorio

Móvil

Descarga The Layouts GRATIS

Para poner sus manos en los diseños gratuitos, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Qué estamos usando

• Divi
• GSAP
• ScrollTrigger para GSAP
• Demostración de ScrollTrigger

1. Construir estructura de elementos

Agregar nueva sección

Fondo degradado

Comenzaremos este tutorial construyendo la estructura del elemento en una página nueva o existente. Agregue una nueva sección, abra la configuración de la sección e incluya un fondo degradado.

• Color 1: # 162c2d
• Color 2: # 122223
• Tipo de degradado: lineal
• Dirección del gradiente: 90 grados
• Posición inicial: 20%
• Posición final: 20%

Espaciado

Vaya a la pestaña de diseño de la sección y modifique los valores de relleno a continuación.

• Relleno superior: 100 px
• Acolchado inferior: 100px

Desbordes

Para asegurarnos de que nada exceda el contenedor de la sección, también ocultaremos los desbordamientos de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 90%
• Ancho máximo: 1580px

Elemento principal

Estamos alineando verticalmente el contenido de nuestra fila agregando las siguientes líneas de código CSS al elemento principal de la fila en la pestaña avanzada:

Escritorio:

display: flex;
justify-content: center;
align-items: center;

Tableta y teléfono:

display: block;

Configuración de la columna 1

Elemento principal

Luego, abriremos la configuración de la columna 1 y modificaremos el ancho de la columna en diferentes tamaños de pantalla en la pestaña avanzada.

Escritorio:

width: 45% !important;

Tableta y teléfono:

width: 100% !important;

Configuración de la columna 2

Color de fondo

Luego, abriremos la configuración de la columna 2 y usaremos un color de fondo.

• Color de fondo: # 193738

Espaciado

A continuación, cambiaremos los valores de espaciado de la columna.

• Acolchado superior:
  • Escritorio: 200px
  • Tableta: 100 px
  • Teléfono: 50px
• Acolchado inferior:
  • Escritorio: 200px
  • Tableta: 100 px
  • Teléfono: 50px
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Elemento principal

Y completaremos la configuración de la columna agregando las siguientes líneas de código CSS al elemento principal de la columna:

Escritorio:

width: 55% !important;

Tableta y teléfono:

width: 100% !important;

Agregar módulo de imagen a la columna 1

Dejar el cuadro de imagen vacío

Es hora de comenzar a agregar módulos, comenzando con un Módulo de imagen en la columna 1. Deje el cuadro de imagen vacío.

Imagen de fondo

En su lugar, usamos una imagen de fondo para este módulo.

Dimensionamiento

Modificaremos la configuración de tamaño en la pestaña de diseño.

• Ancho:
  • Escritorio: 100%
  • Tableta y teléfono: 90%
• Alineación del módulo: centro

Espaciado

Luego, aplicaremos los siguientes valores a la configuración de espaciado:

• Margen superior:
  • Escritorio: 100px
  • Tableta y teléfono: 0px
• Margen inferior:
  • Escritorio: 100px
  • Tableta y teléfono: 0px
• Acolchado superior:
  • Escritorio: 250px
  • Tableta: 200px
  • Teléfono: 150px
• Acolchado inferior:
  • Escritorio: 250px
  • Tableta: 200px
  • Teléfono: 150px

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar contenido H3

En la columna 2. Allí, el primer módulo que necesitamos es un módulo de texto con algo de contenido H3.

Configuración de texto H3

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:

• Título 3 Fuente: Karla
• Color del texto del encabezado 3: # e0ca9a
• Tamaño del texto del encabezado 3:
  • Escritorio: 44px
  • Tableta: 30px
  • Teléfono: 26px

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido de descripción

Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto del módulo en consecuencia:

• Fuente de texto: Alata
• Color del texto: rgba (255,255,255,0.67)
• Tamano del texto:
  • Escritorio: 17px
  • Tableta: 15px
  • Teléfono: 14px
• Altura de la línea de texto: 2.2em

Espaciado

Y agregue un margen superior a la configuración de espaciado.

• Margen superior: 5%

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que agregaremos a esta columna es un módulo de botones. Utilice alguna copia de su elección.

Configuración de botones

Vaya a la pestaña de diseño del módulo y cambie la configuración de los botones de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón:
  • Escritorio: 20px
  • Tableta y teléfono: 18px
• Color del texto del botón: #ffffff
• Ancho del borde del botón: 0px

• Fuente del botón: Karla
• Mostrar icono de botón: Sí
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse por el botón: No

Espaciado

A continuación, agregue valores personalizados a la configuración de espaciado.

• Margen superior: 5%
• Acolchado superior: 20px
• Acolchado inferior: 20px

Clonar fila dos veces

Una vez que haya completado la fila y todos los módulos, puede clonar la fila tantas veces como desee.

Cambiar imágenes y contenido

Asegúrese de cambiar el contenido duplicado en cada una de las filas duplicadas.

2. Agregar efecto de velocidad de desplazamiento

Agregue la clase CSS a los elementos que desea sesgar

Columna 2

Ahora que tenemos la estructura del elemento en su lugar, podemos concentrarnos en hacer que el efecto funcione. Para hacer eso, abra la configuración de la columna 2 de cada fila individualmente y asigne una clase CSS.

• Clase CSS: transformación de velocidad

Módulo de imagen en la columna 1

Estamos agregando esa misma clase CSS a cada módulo de imagen en nuestro diseño.

• Clase CSS: transformación de velocidad

Agregar nueva fila

Estructura de la columna

A continuación, agregaremos una nueva fila al final de la sección usando la siguiente estructura de columnas:

Espaciado

Abra la configuración de filas y elimine todo el relleno superior e inferior predeterminado en la configuración de espaciado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de código a la columna

Luego, agregue un módulo de código a esta nueva fila.

Agregar bibliotecas GSAP y ScrollTrigger

Antes de agregar cualquier código, incluiremos las bibliotecas GSAP y ScrollTrigger entre las etiquetas de script.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Agregar etiquetas de secuencia de comandos

Agregaremos nuevas etiquetas de script justo debajo de estas bibliotecas.

Agregar código personalizado entre etiquetas de script (inclinación vertical)

E incluya las siguientes líneas de código JavaScript para crear un sesgo vertical:

let proxy = { skew: 0 },
    skewSetter = gsap.quickSetter(".velocity-transform", "skewY", "deg"), 
    clamp = gsap.utils.clamp(-10, 10);

ScrollTrigger.create({
  onUpdate: (self) => {
    let skew = clamp(self.getVelocity() / -400);
    if (Math.abs(skew) > Math.abs(proxy.skew)) {
      proxy.skew = skew;
      gsap.to(proxy, {skew: 0, duration: 0.8, ease: "power0", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});
    }
  }
});

gsap.set(".velocity-transform", {force3D: true});

Utilice la inclinación horizontal o la rotación en su lugar

Si desea utilizar el sesgo horizontal o rotar en su lugar, como se ve en la vista previa de esta publicación, simplemente puede reemplazar el "SkewY" en el código con "SkewX" para el sesgo horizontal o "rotar" para rotar! Eso es todo.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Sesgo vertical

Escritorio

Móvil

Sesgo horizontal

Escritorio

Móvil

Girar

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un diseño interactivo en scroll. Más específicamente, le mostramos cómo transformar su diseño en función de la velocidad de desplazamiento. Hemos combinado lo mejor de Divi con dos bibliotecas JavaScript externas, a saber, GSAP y ScrollTrigger para GSAP. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.