Cuanto más explora sitios web en la web, más se encuentra con algunas experiencias en la página realmente personalizadas. Es posible que se haya preguntado cómo lograr ciertas funciones avanzadas y la respuesta suele ser esta: mediante el uso de una biblioteca JavaScript de animación. Una biblioteca de animación popular hoy en día es GSAP. Pero el hecho de que quiera usar una biblioteca de JavaScript para algo no significa que también tenga que pasar manualmente por la parte 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 animación personalizadas. En el tutorial de hoy, por ejemplo, le mostraremos cómo desplazarse horizontalmente cuando en realidad se desplaza verticalmente usando Divi y GSAP. Esto da como resultado un efecto de animación avanzado que puedes personalizar como quieras.
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño 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 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!
Descripción general del enfoque
Lo que estamos usando
- divide
- Biblioteca JavaScript de GSAP
- Complemento ScrollTrigger para GSAP
- Demostración de disparador de desplazamiento
Lo que estamos creando
- Desplazamiento horizontal falso cuando se desplaza verticalmente
- efecto alfiler
- 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
Añadir Sección #1
Comience agregando una primera sección a la página en la que está trabajando. Esta sección servirá como marcador de posición para que podamos ver el efecto 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 Sección #1
Luego, clone 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
desbordamientos
También estamos configurando el desbordamiento vertical en automático. Esto, en combinación con la altura máxima del 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 utilizando 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 del canalón: 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
- Relleno 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
Pase a la pestaña de diseño de la columna y aplique algunos valores de relleno personalizados.
- Acolchado superior: 5%
- Acolchado inferior: 5%
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Borde
Usa un borde también.
- Ancho del borde: 1px
- Color del borde: #000000
Agregue 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 contiene algo de contenido H4.
Configuración de texto H4
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H4 de la siguiente manera:
- Título 4 Fuente: Código fuente Pro
- Título 4 Color del texto: #000000
- Título 4 Tamaño del texto:
- Escritorio: 1.2vw
- Tableta: 2.5vw
- Teléfono: 3.5vw
- Encabezado 4 Espaciado entre letras: 1px
Agregue el Módulo de Texto #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
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:
- Encabezado 3 Fuente: Alata
- Título 3 Tamaño del texto:
- Escritorio: 2.5vw
- tableta: 4vw
- Teléfono: 7vw
Agregue el Módulo de Texto #3 a la Columna
Agregar contenido
Agregue un último módulo de texto a la columna con 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 de texto: Código fuente Pro
- Tamano del texto:
- Escritorio: 0.8vw
- Tableta: 2vw
- Teléfono: 3vw
- Altura de línea de texto: 1,5 em
Dimensionamiento
Cambie la configuración de tamaño a continuación.
- Ancho:
- Escritorio: 67%
- Tableta y teléfono: 100%
Espaciado
Y complete la configuración del módulo aplicando algunos valores de relleno de respuesta 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 copia
El último módulo que necesitamos para completar el diseño de la fila es un módulo de botones. Agregue 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 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
Agregue algunos valores de relleno personalizados a continuación.
- Relleno superior: 15px
- Relleno inferior: 15px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Posición
Y reposicione el módulo en la pestaña avanzada.
- Posición: Absoluta
- 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 hayas completado la primera sección, puedes clonarla dos veces.
Cambiar imagen y copiar y vincular
Asegúrese de cambiar la imagen, copiar y vincular en cada sección duplicada.
2. Agregar funcionalidad
Agregue la 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 centrarnos en la funcionalidad de todo. El primer paso para lograr el resultado es asignar una clase CSS personalizada a cada sección que desee 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 ser en cualquier lugar que desee.
Agregar bibliotecas GSAP y ScrollTrigger primero
Copie y pegue las bibliotecas GSAP y ScrollTrigger dentro del Módulo de código. Use etiquetas de script para esto con las siguientes fuentes:
|
01
02
|
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" |
Justo debajo de las etiquetas de secuencias de comandos de la biblioteca, agregaremos algunas etiquetas de secuencias de comandos nuevas.
Añadir código JS
Prepárese para el uso de JQuery
Dentro de estas etiquetas de script, comenzaremos cargando JQuery.
|
01
02
|
jQuery(document).ready(function($){ }); |
Registrar el complemento ScrollTrigger
Luego, registraremos el complemento ScrollTrigger.
|
01
|
gsap.registerPlugin(ScrollTrigger); |
Envuelva todas las secciones relevantes en una nueva división
También estamos colocando cada una de las secciones relevantes dentro de un nuevo div usando las siguientes líneas de código:
|
01
02
|
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, vamos a utilizar una nueva interpolación con un disparador de desplazamiento. El código que hace que esto suceda es el siguiente:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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 }}); |
A continuación, agregaremos algunas etiquetas de estilo a nuestro módulo de código.
Y completaremos el tutorial y la funcionalidad agregando las siguientes líneas de código CSS entre las etiquetas de estilo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
.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 personalizado de animación con el que quizás te hayas topado en algún momento y te hayas preguntado cómo podrías hacerlo con DIvi. ¡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.