Estoy creando una sección de héroe que cambia la imagen en el desplazamiento (hay 3 imágenes en total) y luego pasa a las secciones de contenido debajo del héroe después del punto de desplazamiento final en la sección de héroe.

www.landor.com es un gran ejemplo de exactamente lo que estoy tratando de lograr.

Este es el progreso que he hecho hasta ahora, aunque no puedo pasar del héroe a la siguiente sección: staging.kpkreative.co.uk/biilddev

 CSS & HTML using Skrollr.js: <style> /* Styles to make skrollable work. Copy these to your file. */ .skrollable { position:fixed; z-index:100; } .skrollr-mobile .skrollable { position:absolute; } .skrollable .skrollable { position:absolute; } .skrollable .skrollable .skrollable { position:static; } /* End skrollable styles */ body { margin: 0; } .scene { width: 100%; height: 100%; } </style> <div class="hero-wrapper"> <div id="scene1" class="scene skrollable skrollable-after" data-500="opacity: 1;" data-2500="opacity: 1;" style="opacity: 1;"> <h1>Hero Title</h1></div> <div id="scene2" class="scene skrollable skrollable-after" data-3000="opacity: 0;" data-5000="opacity: 1;" style="opacity: 1;"></div> <div id="scene3" class="scene skrollable skrollable-between" data-5500="opacity: 0;" data-7500="opacity: 1;" style="opacity: 0.5205;"></div> </div> <div class=""> <h1>SCENE 2</h1> </div> <div class="" > <h1>SCENE 3</h1> </div> <div class=""> <h1>SCENE 4</h1> </div>

Creo que necesito agregar algo de javascript para cuando el evento DOMContentLoaded pueda calcular las dimensiones de la ventana gráfica.

Cualquier ayuda sería apreciada.

Gracias por adelantado.