Si alguna vez viste una página web donde al hacer scroll la pantalla completa cambia de una sección a otra con ese efecto de fondo que se mueve lento y da sensación de profundidad, ya sabes de qué estamos hablando.
Ese efecto se llama fullpage con parallax, y normalmente para lograrlo necesitas una librería de pago llamada fullPage.js. En este tutorial te muestro cómo conseguir exactamente ese mismo resultado en Divi, sin pagar ninguna licencia y sin instalar ningún plugin adicional.
¿Qué vas a lograr?
Una página donde cada sección ocupa toda la pantalla y al hacer scroll se revela la siguiente con un efecto de profundidad en el fondo. El fondo de cada sección se mueve a una velocidad diferente a la del contenido, generando esa sensación de profundidad característica. Elegante, fluido y completamente construido con Divi.
El resultado incluye todo lo que esperarías de una solución profesional:
- Transición suave entre secciones — sin saltos bruscos, con una animación fluida que se siente natural
- Efecto parallax real en el fondo de cada sección, ese movimiento lento que da sensación de profundidad
- Puntos de navegación en el lateral de la pantalla, generados automáticamente sin tocar el HTML de Divi
- Funciona con trackpad — sin importar qué tan rápido hagas scroll, siempre avanza de una sección a la vez
- Funciona con swipe en móvil — tus visitantes pueden deslizar el dedo para navegar
- Navegación por teclado con las flechas del teclado o las teclas PageUp y PageDown
- Compatible con el menú de Divi — puedes enlazar cada ítem del menú directamente a una sección, y al hacer clic pasa por cada slide intermedio
- Sin plugins, sin licencias, sin complicaciones — una vez que lo tienes configurado lo reutilizas en cualquier proyecto
¿Para qué tipo de proyectos sirve?
Este efecto funciona especialmente bien en páginas de inicio que quieren causar una primera impresión fuerte, landing pages de productos o servicios, páginas de portafolio, y cualquier proyecto donde el cliente quiera algo visualmente diferente a un scroll normal.
Es el tipo de detalle que hace que un cliente diga «quiero algo así para mi sitio» cuando ve la demo.
¿Cómo lo construimos en Divi?
Lo mejor de este ejercicio es que no tienes que salirte del builder para nada. Cada sección de Divi es una diapositiva, tú le pones la imagen de fondo desde el mismo panel de Divi, agregas tu contenido con módulos normales, y el efecto hace el resto.
No necesitas tocar código para agregar o modificar el contenido — eso lo sigues haciendo desde el builder como siempre.
0 comentarios