I am building a hero section that changes the image on scroll (there are 3 images in total) and then moves on to the content sections below the hero after the end scroll point on the hero section.

www.landor.com is a great example of exactly what I am trying to achieve.

This is the progress I have made so far, though I cant scroll past the hero to the section below - 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>

I believe I need to add some javascript that for when DOMContentLoaded event you can calculate the viewport dimensions.

Any help would be appreciated.

Thanks in advance.