Cerrar video

Cómo crear un efecto de desplazamiento híbrido (vertical y horizontal) al hacer scroll en divi y sin plugins

por | Jun 16, 2021 | Tutorial gratuito | 20 Comentarios

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.

Cómo crear un efecto de desplazamiento híbrido (vertical y horizontal) al hacer scroll en divi y sin plugins

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.

Tutoriales Relacionados

20 Comentarios

  1. Barbara

    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.

    Responder
    • Oscar Viedma

      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.

      Responder
      • Bernardo Cruz

        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.

        Responder
        • Oscar Viedma

          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.

          Responder
          • boris marchiani

            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.

        • Boris

          Hola! Cómo lo resolviste? Gracias

          Responder
          • Oscar Viedma

            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 🙂

          • Boris

            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!!

          • Oscar Viedma

            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;
            }
            
          • Boris Marchiani

            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.

          • Oscar Viedma

            Para aplicarlo solo en móvil debe ser así:

            @media only screen and (max-width: 768px) {
             .pin-spacer {
               display: none !important;
             }
            }
            
  2. isabel

    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?

    Responder
    • Oscar Viedma

      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.

      Responder
  3. Carlos

    Excelente aporte! consideraré implementar una vista distinta de móbil y de PC como lo sugieres!

    Responder
  4. Heriberto Noguera

    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?

    Responder
    • Oscar Viedma

      Hola Heriberto, probablemente tengas mal definido el ancho en el CSS, ese punto es importante dependiendo cuantas secciones en horizontal tengas

      Responder
  5. Ale

    Super tutorial!!!! Perfectamente bien explicado. Me quedó tal cual. Muchísimas gracias!!!!!

    Responder
    • Oscar Viedma

      Excelente Ale, muchas gracias 🙂 ¡Un abrazo!

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest