Cómo desplazarse horizontalmente automáticamente cuando se desplaza verticalmente con Divi y GSAP

Cuanto más explora los sitios web en la web, más se encuentra con experiencias en la página realmente personalizadas. Es posible que se haya estado preguntando cómo lograr cierta funcionalidad avanzada y la respuesta suele ser la siguiente: mediante el uso de una biblioteca de animación de JavaScript. Una biblioteca de animación popular hoy en día es GSAP. Pero el hecho de que desee utilizar una biblioteca de JavaScript para algo no significa que también tenga que revisar manualmente la parte de HTML y CSS. Divi puede hacerse cargo de la mayor parte de su proceso de diseño web; construcción y diseño, lo que le deja más tiempo para concentrarse en la funcionalidad y la animación personalizadas. En el tutorial de hoy, por ejemplo, le mostraremos cómo desplazarse horizontalmente cuando en realidad se desplaza verticalmente utilizando Divi y GSAP. Esto da como resultado un efecto de animación avanzado que puede personalizar como desee. ¡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.

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, 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!

Resumen del enfoque

Qué estamos usando

• Divi
• Biblioteca de JavaScript GSAP
• Complemento ScrollTrigger para GSAP
• Demostración de ScrollTrigger

Lo que estamos creando

• Desplazamiento horizontal falso al desplazarse verticalmente
• Efecto pin
• Hacer que el efecto funcione en varias secciones de nuestra elección (no necesariamente en toda la página)
• Una experiencia de pantalla horizontal sin esfuerzo en todos los tamaños de pantalla

1. Agregar secciones de marcador de posición

Agregar la sección n. ° 1

Comience agregando una primera sección a la página en la que está trabajando. Esta sección servirá como un marcador de posición para que podamos ver cómo el efecto cae en su lugar.

Dimensionamiento

Abra la configuración de la sección y asigne una altura a la configuración de tamaño.

• Altura: 60vh

Clonar la sección n. ° 1

Luego, clona la sección de marcador de posición una vez. Esto nos ayudará a generar algo de espacio en la parte superior e inferior de nuestra página, sin que sea parte del desplazamiento horizontal (ver vista previa).

1. Diseño de la sección de construcción

Agregar nueva sección entre secciones

Ahora que tenemos las dos secciones de marcador de posición en su lugar, es hora de crear la primera sección que usaremos dentro de nuestro desplazamiento horizontal. Agregue esta sección justo entre las dos secciones de marcador de posición.

Dimensionamiento

Abra la configuración de la sección y asigne una altura máxima en la configuración de tamaño.

• Altura máxima: 100vh

Desbordes

También estamos configurando el desbordamiento vertical en automático. Esto, en combinación con la altura máxima en el paso anterior, nos ayudará a generar automáticamente una barra de desplazamiento en ciertos tamaños de pantalla donde los elementos de la sección exceden la altura de la ventana gráfica.

• Desbordamiento vertical: automático

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Imagen de fondo

Sin agregar módulos todavía, abra la configuración de la fila y use una imagen de fondo.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro

Dimensionamiento

Modifique la configuración de tamaño de la fila siguiente.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho:
  • Escritorio: 70%
  • Tableta y teléfono: 80%

Espaciado

Junto con la configuración de espaciado.

• Acolchado superior:
  • Escritorio: 30vh
  • Tableta y teléfono: 20vh
• Acolchado inferior: 0px

Configuración de columna

Luego, abra la configuración de la columna.

Color de fondo

Utilice un color de fondo blanco para la columna.

• Color de fondo: #ffffff

Espaciado

Vaya a la pestaña de diseño de la columna y aplique algunos valores de relleno personalizados.

• Acolchado superior: 5%
• Acolchado inferior: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Frontera

Usa un borde también.

• Ancho del borde: 1 px
• Color del borde: # 000000

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

Agregar contenido H4

Es hora de agregar módulos, comenzando con un primer módulo de texto que contenga algo de contenido H4.

Configuración de texto H4

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

• Fuente del título 4: Código fuente Pro
• Título 4 Color del texto: # 000000
• Tamaño del texto del encabezado 4:
  • Escritorio: 1.2vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw
• Encabezado 4 espaciado de letras: 1px

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

Agregar contenido H3

Agregue otro módulo de texto justo debajo del anterior y use algo de contenido H3 en el cuadro de contenido.

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: Alata
• Tamaño del texto del encabezado 3:
  • Escritorio: 2.5vw
  • Tableta: 4vw
  • Teléfono: 7vw

Agregar el módulo de texto n. ° 3 a la columna

Agregar contenido

Agregue un último módulo de texto a la columna con 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: código fuente Pro
• Tamano del texto:
  • Escritorio: 0.8vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Altura de la línea de texto: 1.5em

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Ancho:
  • Escritorio: 67%
  • Tableta y teléfono: 100%

Espaciado

Y complete la configuración del módulo aplicando algunos valores de relleno sensibles a la configuración de espaciado.

• Acolchado superior:
  • Escritorio: 3vh
  • Tableta y teléfono: 5vh
• Acolchado inferior:
  • Escritorio: 3vh
  • Tableta y teléfono: 5vh

Agregar módulo de botones a la columna

Agregar copia

El último módulo que necesitamos para completar el diseño de la fila es un módulo de botones. Agregue una 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 en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón:
  • Escritorio: 0.8vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 000000
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Código fuente Pro
• Estilo de fuente del botón: mayúsculas

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Acolchado superior: 15px
• Acolchado inferior: 15px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Posición

Y reposicione el módulo en la pestaña avanzada.

• Posición: Absoluto
• Ubicación: esquina inferior izquierda
• Desplazamiento vertical: -5%
• Desplazamiento horizontal: 5%

2. Sección de reutilización

Clonar sección dos veces

Una vez que haya completado la primera sección, puede clonarla dos veces.

Cambiar imagen y copiar y vincular

Asegúrese de cambiar la imagen, copiar y vincular en cada sección duplicada.

2. Agregue funcionalidad

Agregue una clase CSS a cada sección que desee incluir en el desplazamiento horizontal

Ahora que tenemos todos los elementos en su lugar, podemos comenzar a enfocarnos en la funcionalidad de todos. El primer paso para lograr el resultado es asignar una clase CSS personalizada a cada sección que desea que forme parte del desplazamiento horizontal. En este caso, eso significa las tres secciones entre las secciones de marcador de posición.

• Clase CSS: sección horizontal

Agregar nuevo módulo de código en algún lugar dentro de la página

A continuación, agregue un módulo de código a la página. Esto puede estar en cualquier lugar que desee.

Agregue primero las bibliotecas GSAP y ScrollTrigger

Copie y pegue las bibliotecas GSAP y ScrollTrigger dentro del Módulo de código. Utilice etiquetas de script para esto con las siguientes fuentes:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

Agregar nuevas etiquetas de script para código personalizado

Justo debajo de las etiquetas de secuencia de comandos de la biblioteca, agregaremos algunas nuevas etiquetas de secuencia de comandos.

Agregar código JS

Prepárese para el uso de JQuery

Dentro de estas etiquetas de script, comenzaremos cargando JQuery.

jQuery(document).ready(function($){  
});

Registrar el complemento ScrollTrigger

Luego, registraremos el complemento ScrollTrigger.

gsap.registerPlugin(ScrollTrigger);

Envuelva todas las secciones relevantes en una nueva división

También colocamos cada una de las secciones relevantes dentro de un nuevo div usando las siguientes líneas de código:

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

Crear nueva interpolación GSAP con ScrollTrigger

Para hacer que el desplazamiento horizontal falso funcione, usaremos una nueva interpolación con un disparador de desplazamiento. El código que hace que esto suceda es el siguiente:

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

Agregar etiquetas de estilo para código CSS personalizado

A continuación, agregaremos algunas etiquetas de estilo a nuestro módulo de código.

Insertar código CSS entre etiquetas de estilo

Y completaremos el tutorial y la funcionalidad agregando las siguientes líneas de código CSS entre las etiquetas de estilo:

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo hacer un esfuerzo adicional para su sitio web con Divi y GSAP. Más específicamente, le mostramos cómo desplazarse horizontalmente cuando en realidad se desplaza verticalmente en su página. Este es un tipo de animación personalizado con el que quizás te hayas encontrado en un momento determinado y te hayas preguntado cómo podrías hacerlo con DIvi. ¡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.