javascript - 滚动上带有过渡图像的英雄图像

Question

我正在构建一个更改滚动图像的英雄部分（总共有 3 张图像），然后在英雄部分的结束滚动点之后移动到英雄下方的内容部分。

www.landor.com是我正在努力实现的一个很好的例子。

这是我迄今为止取得的进展，尽管我无法滚动到英雄到下面的部分 - 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>

我相信我需要添加一些 JavaScript，以便在 DOMContentLoaded 事件时可以计算视口尺寸。

任何帮助，将不胜感激。

提前致谢。

标签： javascripthtmlcssskrollr