Cómo ejecutar automáticamente horizontalmente cuando se ejecuta verticalmente con div y gsap

Cuanto más exploran los sitios web web, más experiencias personalizadas en la página. Es posible que se pregunte cómo hacer ciertas características avanzadas y la respuesta es a menudo esto: usar una biblioteca JavaScript. Una popular biblioteca de animación hoy en día es GSAP. Pero solo porque desee usar una biblioteca JavaScript para algo, no significa que tenga que viajar manualmente y 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 concentrarse en la funcionalidad y la animación personalizadas. En el tutorial de hoy, por ejemplo, le mostraremos cómo desplazarse horizontalmente cuando se despliegue verticalmente usando Div y GSAP. Esto da como resultado un efecto de animación avanzado que puede personalizar de todos modos. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlos usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Descripción general del enfoque de lo que usamos
Div
Biblioteca JavaScript GSAP
Complemento de desplazamiento para GSAP
Demostración de desplazamiento
Lo que creamos
Falso desplazamiento horizontal cuando se ejecuta verticalmente
Efecto de alfiler
Realización de efecto en múltiples secciones de su 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 sustituyentes Agregar sección no. 1 Comience agregando una primera sección a la página en la que está trabajando. Esta sección servirá como sustituto, para que podamos seguir el efecto a medida que se coloca.
Dimensión Abra la configuración de la sección y asigne una altura de configuración de tamaño.

Altura: 60 VH
Clon Sección no. 1 Luego clone la sección sustituyente una vez. Esto nos ayudará a generar espacio en la parte superior e inferior de nuestra página, sin que esto sea parte del desarrollo horizontal (ver Vista previa).

1. Construya la sección de diseño Agregue una nueva sección entre las secciones ahora, que tenemos las dos secciones sustituyentes, es hora de crear la primera sección que utilizaremos en nuestro desarrollo horizontal. Agregue esta sección justo entre las dos secciones sustituyentes. La dimensión abre la configuración de la sección y asigne una altura máxima en la configuración de dimensionamiento.

Altura máxima: 100 VH

Las operaciones también establecen descarga vertical en el automóvil. Esto, en combinación con la altura máxima en el paso anterior, nos ayudará a generar automáticamente una barra de desplazamiento en ciertas dimensiones de la pantalla donde los elementos de la sección exceden la altura de la ventana.
Desbordamiento vertical: Auto

Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Imagen de fondo sin agregar módulos, abra la configuración de línea y use una imagen de fondo.

Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
Dimensión luego cambie la configuración de dimensionamiento de la fila.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho:
Escritorio: 70%
Tableta y teléfono: 80%
Espacio junto con la configuración del espacio.
Revestimiento superior:

Escritorio: 30 VH
Tableta y teléfono: 20 VH
Finamiento inferior: 0 PX
Configuración de la columna luego abra la configuración de la columna.
El color del papel tapiz usa un color de fondo blanco para la columna.

Color de fondo: #ffffff

El espacio ir a la pestaña Diseño de la columna vertebral y aplique algunos valores de llenado personalizados.
Revestimiento superior: 5%

Finamiento inferior: 5%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Borde usa un borde.
Ancho óseo: 1 pxculores borde: # 000000

Agregue el módulo de texto no. 1 En la columna, agregar el contenido H4 es hora de agregar módulos, comenzando con un primer módulo de texto que contiene contenido H4.
Configuración de texto H4 Cambiar a la pestaña 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 de texto: # 000000

Título 4 Dimensión de texto:
Escritorio: 1.2VW
Tableta: 2.5VW
Teléfono: 3.5VW
Rúbrica 4 Espaciación de litros: 1 PX
Agregue el módulo de texto no. 2 En la columna, agregue el contenido H3, agregue otro módulo de texto justo debajo del anterior y use un contenido H3 en el cuadro de contenido.
Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H3 en consecuencia:
3 Fuentes de fuentes: Aleata

Rúbrica 3 Dimensión de texto:


Escritorio: 2.5VW
Tableta: 4VW
Teléfono: 7VW
Agregue el módulo de texto no. 3 En la columna Agregar contenido Agregue un último módulo de texto en la columna con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo en consecuencia:
Texto de fuente: código fuente Pro

Tamano del texto:

Escritorio: 0.8VW
Tableta: 2VW
Teléfono: 3VW
La altura de la línea de texto: 1.5em
La dimensión cambia la configuración de dimensionamiento adicional.
Ancho:
Escritorio: 67%

Tableta y teléfono: 100%
Espacio y complete la configuración del módulo aplicando valores de llenado receptivo a la configuración de espaciado.
Revestimiento superior:
Escritorio: 3VH

Tableta y teléfono: 5vh
Levante inferior:
Escritorio: 3VH
Tableta y teléfono: 5vh
Agregue un módulo de botón a la columna Agregue una copia El último módulo que necesitamos para completar el diseño de la fila es un módulo de botón. Agregue una copia de su elección.
Configuración del botón Pase a la pestaña Diseño del módulo y cambie la configuración del botón Según: Use estilos personalizados: Sí
Botón Tamaño de texto:

Escritorio: 0.8VW

Tableta: 2VW
Teléfono: 3VW
El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: código fuente PRO
El estilo de la fuente del botón: mayúscula
Espacio agregue algunos valores de llenado personalizados.
Revestimiento superior: 15 px
Revestimiento inferior: 15 PX
ENNIZACIÓN IZQUIERDA: 50 PX


Revestimiento derecho: 50 PX
Posición y reposicione el módulo en la pestaña avanzada.
Posición: Absoluto
Ubicación: esquina inferior izquierda
Brecha vertical: -5%

Brecha horizontal: 5%
2. La sección de reutilización clon de la sección dos veces después de haber completado la primera sección, puede clonar dos veces.
Cambie la imagen, copie y conéctese asegúrese de cambiar la imagen, copiar y atar en cada sección duplicada.
2. Agregue la funcionalidad Agregue la clase CSS a cada sección que desea incluir en la ejecución horizontal ahora, que tenemos todos los elementos en su lugar, podemos comenzar a centrarnos en la funcionalidad de todos. El primer paso para lograr el resultado es la asignación de una clase CSS personalizada a cada sección que desea ser parte del pergamino horizontal. En este caso, esto significa las tres secciones entre las secciones sustituyentes.
Clase CSS: sección horizontal

Agregue un nuevo módulo de código en algún lugar dentro de la página y luego, agregue un módulo de código en la página. Puede estar en cualquier lugar que desee.

Agregue las bibliotecas GSAP y ScrollTrigger primero copie sus bibliotecas GSAP y ScrollTrigger dentro del módulo de código. Use etiquetas de script para esto con las siguientes fuentes: src = “https://cdnjs.cloudflare.com/ajax/lbs/gsap/3.5.1/gsap.min.js” src = “https: //cdnjs.cloudflare. com/ajax/libs/gsap/3.5.1/scrolligger.min.js ”

Agregue nuevas etiquetas de script para código personalizado justo en las etiquetas del script de la biblioteca, agregaremos algunas etiquetas de script.
Agregue el código JS Prepárese para usar jQuery dentro de estas etiquetas de script, comenzaremos cargando JQUEY. JQuery (documento) .Ready (function ($) {

});

Registre el complemento Scrollger luego, grabaremos el complemento ScrollGger. Gsap.registerplugin (scrollgger);
Envuelva todas las secciones relevantes en un nuevo DIV también, colocamos cada una de las secciones relevantes en una nueva DI utilizando las siguientes líneas de código: var todas las aliencias = $ (‘. Sección horizontal’);

Allsections.wrapall (‘
‘);

Cree un nuevo GSAP Tweeen con Scrollgger para que funcione el falso desfile horizontal, utilizaremos 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 * (todas las personas con longitud – 1),

facilidad: “ninguno”,

ScrollTrigger: {
Trigger: “. Horizizontal-Container”,

Pin: Verdadero,
Inicio: “Top Top”,
Scrub: 1,
Snap: falso,
// Base el desplazamiento vertical sobre cómo vide el contenedor es tan natural.
End: () => ” + =” + document.querySelector (“. Horizontal-Container”). OffsetWidth
}
});
Agregue etiquetas de estilo para el código CSS personalizado, luego agregaremos algunas etiquetas de estilo en nuestro módulo de código. Inserte el código CSS entre las etiquetas de estilo y completaremos el tutorial y la funcionalidad, agregando las siguientes filas de código CSS entre etiquetas de estilo: contenedor horizontal {
Ancho: 300%;
Altura: 100%;
Pantalla: Flex;
Flex-Wrap: Nowrap;

Max-Width: Ninguno;

}
#Contenedor de página {
Desbordamiento: oculto;
}
Sección Horizontal {
Ancho: 100%;
Will-Change: Transform;
}
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo ir más allá para su sitio web con Div y GSAP. Más precisamente, le mostré cómo desplazarse horizontalmente cuando se ejecuta verticalmente en su página, este es un tipo de animación personalizado que puede conocer a la vez y preguntar cómo puede hacerlo con DIV. ¡Podrías 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.