Cómo transformar tu diseño con Scroll Velocity usando Divi y GSAP

Cuanto más te familiarices con Divi, más te darás 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 los efectos de desplazamiento y las opciones fijas .. Ahora, aunque estas son características bastante poderosas por sí mismas, tienen sus límites. Límites que puede romper fácilmente si usa 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 los diseños 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Lo que estamos usando

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

1. Estructura del elemento de construcción

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 gradiente: lineal
  • Dirección del gradiente: 90 grados
  • Posición inicial: 20%
  • Posición final: 20%

Espaciado

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

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

desbordamientos

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 del canalón: 1
  • Igualar 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:

01
02
03
display: flex;
justify-content: center;
align-items: center;

Tableta y teléfono:

01
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:

01
width: 45% !important;

Tableta y teléfono:

01
width: 100% !important;

Configuración de la columna 2

Color de fondo

Entonces, 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: 100px
    • Teléfono: 50px
  • Acolchado inferior:

    • Escritorio: 200px
    • Tableta: 100px
    • Teléfono: 50px
  • Relleno izquierdo: 5%
  • Relleno 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:

01
width: 55% !important;

Tableta y teléfono:

01
width: 100% !important;

Agregar módulo de imagen a la columna 1

Dejar 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 cambio, estamos usando 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 #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

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

  • Encabezado 3 Fuente: Karla
  • Título 3 Color del texto: #e0ca9a
  • Título 3 Tamaño del texto:

    • Escritorio: 44px
    • Tableta: 30px
    • Teléfono: 26px

Agregue el Módulo de Texto #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 de descripción de su elección.

Configuración de texto

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

  • Fuente del texto: Alata
  • Color del texto: rgba(255,255,255,0.67)
  • Tamano del texto:

    • Escritorio: 17px
    • Tableta: 15px
    • Teléfono: 14px
  • Altura de línea de texto: 2,2 em

Espaciado

Y agregue un poco de 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

Pase a la pestaña de diseño del módulo y cambie la configuración del botón 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
  • Solo mostrar icono al pasar el mouse sobre el botón: No

Espaciado

Agregue valores personalizados a la configuración de espaciado a continuación.

  • Margen superior: 5%
  • Relleno superior: 20px
  • Relleno 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úrate 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 lograr 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 utilizando la siguiente estructura de columnas:

Espaciado

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

  • Relleno superior: 0px
  • Relleno 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 script

Agregaremos nuevas etiquetas de script justo debajo de estas bibliotecas.

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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});

Use sesgo horizontal o gire en su lugar

Si desea usar la inclinación horizontal o rotar, como se ve en la vista previa de esta publicación, simplemente puede reemplazar «SkewY» en el código con «SkewX» para sesgar 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 desplazamiento. Más específicamente, le mostramos cómo transformar su diseño según la velocidad de desplazamiento. Hemos combinado lo mejor de Divi con dos bibliotecas de JavaScript externas, a saber, GSAP y ScrollTrigger para GSAP. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.

Publicaciones relacionadas:

  1. Cómo crear capítulos de sección usando las nuevas opciones de diseño de Divi
  2. Cómo ahorrar espacio en su encabezado usando iconos de alternar con Divi
  3. Cómo crear cálculos automáticos de precios con Divi (usando JQuery)
  4. Cómo agregar una descarga de PDF de WordPress con un clic usando Divi