Cerrar video

Cómo crear una página web con desplazamiento horizontal (horizontal scrolling) con divi sensible a efectos de animación

por | Feb 4, 2021 | Tutorial premium | 6 Comentarios

En este tutorial único y exclusivo de la Academia OV DIVI aprenderás a crear una página web con desplazamiento horizontal con divi.

Si eres de los miembros que me siguen desde hace tiempo sabrás que hace ya algún tiempo realicé un tutorial gratuito para el canal de youtube dónde realizamos justamente un efecto muy parecido, pero, el problema del desplazamiento horizontal que implementamos anteriormente es que era un desplazamiento normal y no aceptaba efectos de animación, además en responsive no era tan amigable que digamos.

Así que puse manos a la obra para sacar un tutorial más avanzado y en esta ocasión el resultado ha sido increíble.

En este nuevo tutorial de desplazamiento horizontal podemos ir avanzando de pantalla en pantalla, de diapositiva en diapositiva, de sección en sección, simplemente tenemos que navegar haciendo scroll hacia abajo o scroll hacia arriba en desktop, y en móvil basta con hacer swipe up, swipe down, swipe left o swipe right, la realidad que es una funcionalidad completamente adaptable a cualquier tipo de dispositivo.

Cómo crear una página web con desplazamiento horizontal (horizontal scrolling) con divi sensible a efectos de animación

La cereza del pastel es que podemos activar animaciones en cualquier elemento y estos se van a animar cada vez que se muestren en pantalla, es decir, cada vez que sean visibles en el área del viewport. Esto va a cambiar el juego porque podrás realizar sitios muy avanzados con una navegación diferente, aquí tendrás que explotar tu creatividad y tu imaginación para lograr resultados fascinantes.

Así qué si estás interesado en aprender cómo implementar un desplazamiento horizontal en cualquier sitio web creado con divi no dudes mas y únete a los tutoriales exclusivos de la Academia OV Divi, además de este tutorial tendrás acceso a muchos más tutoriales premium exclusivos de divi.

Por último para que te quede todo claro y navegues por el resultado que lograrás al culminar este tutorial aquí te dejo la demo del ejercicio:

> ENLACE A LA DEMOSTRACIÓN DEL EJERCICIO.

Suscríbete a los tutoriales exclusivos OV DIVI PRO por tan solo $6.00 USD al mes y ten acceso a este y muchos más tutoriales exclusivos de divi y wordpress.

6 Comentarios

  1. Fernando

    Buenas tardes, estuve contactandome con ustedes por medio de Youtube y llegué a este enlace.
    Tengo un cliente obsesionado con que su sitio se desplace hacia el costado pero, a diferencia de este ejemplo, que sea utilizando un menú además del scroll.
    Se me ocurrió que quizás agregando puntos de ancla en los títulos de las secciones que van pasando y estableciendo un menú fijo lo pueda lograr.
    ¿Funcionará con esta modalidad? Si resuelven mi duda me suscribo.

    Saludos!

    Responder
    • Oscar Viedma

      Hola Fernando, sí, creo te he respondido por youtube. Aún no lo he realizado pero estoy casi seguro que es posible con la librería que utilizamos en este tutorial. Puedes unirte, realizar este tutorial y posteriormente yo te ayudo con la implementación de las anclas y el menú. Si no lo logramos te regreso tus $6 USD de la suscripción 🙂

      Responder
  2. jimmy

    Hola, me interesa hacer este efecto, pero en este caso que el desplazamiento sea vertical y que los diferentes módulos se carguen full page. será posible realizar ese cambio, manteniendo el menú hamburguesa con navegación con botones anclados a una misma pagina?

    Responder
  3. isabel

    hola estoy interesada en este curso, pero no entiendo si con los 6$ de suscripcion tengo acceso a el??

    Responder
    • Oscar Viedma

      Hola Isabel, solo tengo un curso completo premium que es independiente a los tutoriales exclusivos. El curso tiene un costo de $47 USD (pago único) y los tutoriales exclusivos tienen un costo de $6 USD/mes.

      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.

$6 USD / mes

Pin It on Pinterest