En este tutorial gratuito aprenderás a crear un efecto de desplazamiento híbrido (vertical y horizontal) al hacer scroll en divi. Esto lo lograremos con una librería javascript llamada GSAP que vamos a integrar fácilmente con divi.
Este efecto lo podemos aplicar en cualquier página web creada con divi theme builder. El efecto consiste en tener nuestra página dividida en secciones, al hacer scroll las primeras secciones se desplazarán como normalmente lo hacen; de forma vertical pero al llegar por ejemplo a la tercer sección el desplazamiento cambiará a horizontal de manera automática, es decir, nosotros seguiremos haciendo scroll hacia abajo (o hacia arriba) pero nuestra página automáticamente se empezará a desplazar de forma horizontal para posteriormente continuar con el scroll en vertical. ¿Suena genial verdad?
Cabe mencionar que este tutorial esta basado en un tutorial que ha hecho el equipo de elegant themes anteriormente, pero nosotros lo haremos un poco diferente.
Aquí te comparto el código JavaScript que necesitamos para integrar GSAP con divi e inicializar la librería:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script>
jQuery(document).ready(function($){
gsap.registerPlugin(ScrollTrigger);
var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');
gsap.to(allSections, {
xPercent: -100 * (allSections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".horizontal-container",
pin: true,
start: "top top",
scrub: 1,
snap: false,
end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
}
});
});
</script>
Y aquí te dejo los estilos CSS que necesitamos para ajustar las secciones:
.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
background-color: #000000;
}
#page-container {
overflow: hidden;
}
.horizontal-section {
width: 100%;
will-change: transform;
}
Dale play al video para que sepas cómo integrar estos códigos y así logres un increíble efecto de desplazamiento vertical y horizontal en tu sitio web hecho con divi.
Holaaa. He seguido el tutorial y me ha salido perfecto, muchas gracias. Pero quería saber si habría alguna forma de que el diseño fuera responsive.
Hola Barbara, el efecto funciona en móvil, el problema es que si tus secciones tienen mucho contenido nos causará conflictos. Lo mejor es ocultar las secciones con desplazamiento horizontal en móvil y crear unas nuevas secciones para mostrar solamente en dispositivos móviles. Esta puede ser una solución.
Un abrazo.
Hola Oscar
Antes de nada, felicitarte por tu gran trabajo. Los tutoriales de OvDivi (de momento solo he utilizado los gratuitos pero pienso suscribirme) ofrecen un salto de calidad para usuarios Divi.
He seguido este tutorial y da un gran resultado pero como comentan otras personas, causa conflictos en dispositivos móviles, algo lógico debido a la naturaleza del mismo.
El problema que tengo es que al ocultar las secciones en dispositivos móviles me aparece un hueco en blanco equivalente al espacio de estas secciones (algo que nunca me había pasado a la hora de deshabilitar una sección)
¿Sabes a qué puede deberse este error(solo en móvil, en desktop se ve correctamente)?
Esta es la página: https://higos-fiki.es/hybrid-scroll-2/
Muchas gracias.
Saludos.
Hola Bernando, perdona por leerte hasta apenas, no había podido dedicarle tiempo a las consultas del blog porque el soporte en los tutoriales premium consume mi tiempo 🙁 tengo que dar prioridad, espero me comprendas.
Sobre el problema que me comentas entré a la web pero creo fue demasiado tarde, por lo que veo la has eliminado o si la tienes en alguna otra parte me compartes la url y yo le doy un vistazo.
Saludos.
Funcionó perfecto! Oscar muchísimas gracias no solo por tus aportes sino por haberte tomado el tiempo de responderme y darme una solución a mi problema.
Hola! Cómo lo resolviste? Gracias
Puedes ocultar las secciones para móvil desde los ajustes de la sección / avanzado / visibilidad.
Para móvil puedes diseñar otras secciones especificas para esta vista 🙂
Hola! Sí, eso hice. Pero queda un hueco blanco en móvil luego de la sección hecha exclusiva para esta vista. El mismo caso que el comentario anterior de Bernardo. lo puedes ver en https://noispain.com (móvil) Hice varios intentos con otros csc pero sigue quedando el hueco blanco. Gracias!!
Hola nuevamnete Boris, intenta con el siguiente código CSS, lo pegas en los ajustes de la página / Avanzado / CSS Personalizado:
.pin-spacer { display: none !important; }Gracias por responderme. Aplicando ese código se elimina no solo el espacio en blanco sino todo el contenedor de scroll horizontal. Lo elimina no solo en el móvil sino en todo el sitio web. Saludos. Si tienes otro código será bienvenido. Gracias de nuevo.
Para aplicarlo solo en móvil debe ser así:
@media only screen and (max-width: 768px) { .pin-spacer { display: none !important; } }hola oscar como estas soy isaaa… estoy suscrita a tu pagina, hice este tutorial espectacular como todo lo tuyo y me tropece con que no se ve igual para movil, como podria arreglar eso?
Hola Isabel, lo mejor es ocultar las secciones con desplazamiento horizontal en móvil y crear unas nuevas secciones para mostrarlas solamente en dispositivos móviles.
Excelente aporte! consideraré implementar una vista distinta de móbil y de PC como lo sugieres!
Excelente Carlos. Un abrazo 🙂
Hola 😉
Seguí el tutorial, cambiando muy poquito, pero tengo un efecto muy raro…
La primera sección se ve pero luego no hay nada más… hasta que de repente aparecen las 3 secciones en scroll. Pero cuando subes de nuevo se torna más extraño… ¿qué estoy haciendo mal?
Hola Heriberto, probablemente tengas mal definido el ancho en el CSS, ese punto es importante dependiendo cuantas secciones en horizontal tengas
la pueden ver en https://villalon-studio.com/project/lirica-toscana/
Super tutorial!!!! Perfectamente bien explicado. Me quedó tal cual. Muchísimas gracias!!!!!
Excelente Ale, muchas gracias 🙂 ¡Un abrazo!