Diseño en vivo de Landing Page multi-scroll en Divi

En nuestro septimo #UXDIVILiveDesign​​ diseñaremos completamente en vivo una landing Page multi-scroll con diferentes elementos de diseños parallax y efectos de typing geniales ¡No te lo puedes perder!

Herramienta recomendada: Canva PRO, ten una prueba de 30 días gratuitos a la herramienta pro desde este enlace: https://bit.ly/3b1IeHl

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Resultado:

Recursos del video:

Puedes descargar el layout del video acá siendo premium.

El código para generar el efecto multi-scroll es el siguiente:

Primero añadimos el JS Library (agrega este código en un módulo de código a final de la página)

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>
<script>
jQuery(function($){
$( ".et_builder_inner_content" ).attr( "id", "fullpage" );
});
</script>

Después añadimos el CSS Library: (agrega este código en un módulo de código a final de la página)

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />

Y finalmente añadimos el Script para la transición de una sección a otra: (agrega este código en un módulo de código a final de la página)

<script>
jQuery(document).ready(function($) {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true,
    navigation: true,
    slidesNavigation: false,
  	scrollingSpeed: 1000
	});

	//methods
	$.fn.fullpage.setAllowScrolling(true);
});
</script>

Artículos relacionados

Comentarios

  1. Hola Jefferson!, muy bueno, muchas gracias!, oye una pregunta, se ve super bien en computadora, pero en movil no se ve el contenido completo de la sección, que adecuaciones se tendrían que hacer para que sea multiscroll para movil? estoy pensando en implementarlo en unas webs nuevas, pero veo ese detalle, en la demo en movil no se puede ver el contenido completo porque hace de que se pasa a la siguiente seccion de información

    1. Hola Carlos, lo que hicimos para mejorar este aspecto fue modificar todos los estilos para móvil de los textos, las imágenes y los espacios de las secciones, de manera que cada sección mostrara el contenido en el viewport de la pantalla (es decir en el espacio visible) lo puedes ver en nuestra demo de ejemplo.

  2. Jefferson. Mil gracias por el tutorial, es un efecto muy interesante, pero tengo un problema, he implementado en una web de pruebas y si bien funciona cuando lo visualizo desde la opcion: Divi>Personalización de temas, cuando entro en el site en una nueva pagina no funciona el scroll ¿ sabes a que puede ser debido?. Te lo agradecería mucho si puedes solucionar mi dudas, me estoy volviendo loco intentándolo.

    Gracias por adelantado y saludos.

  3. Gracias por tu interés y rápida respuesta. Desgraciadamente,a pesar de seguir tus indicaciones, no he conseguido solucionar el problema, y no puedo hacer que se visualice el efecto entrado desde la url, pero si lo hago en divi>personalización de temas se ejecuta sin problemas. Sinceramente no se que hacer.

    Gracias y saludos

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →