Cinematics

Playhead moves once the detection element gets entirely into the viewport.

The following still frames sequences were extracted from original movies Blu-Ray discs and highly compressed for demo purpose only.

<section>
    <div    scroll-frames="demo"
            data-url-mask="https://olivier3lanc.github.io/folio-dark/img/particles-b/particles-b-|1 to 101|.webp"
            data-background-size="cover"
            data-detector="the_detector">
    </div>
    <hr id="the_detector">
</section>
<!-- CSS FOR DEMO PURPOSE ONLY -->
<style>
    [scroll-frames] { 
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;
    }
    section { 
        height: 200vh;
    }
    hr { opacity: 0 }
</style>

© D A R K

<section>
    <div    scroll-frames="demo"
            data-url-mask="https://olivier3lanc.github.io/cinematics-resources/hp_wand_choice/hp_wand_choice_|1 to 100|.webp"
            data-background-size="cover"
            data-detector="the_detector">
    </div>
    <hr id="the_detector">
</section>
<!-- CSS FOR DEMO PURPOSE ONLY -->
<style>
    [scroll-frames] { 
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;
    }
    section { 
        height: 200vh;
    }
    hr { opacity: 0 }
</style>

© Harry Potter

<section>
    <div    scroll-frames="demo"
            data-url-mask="https://olivier3lanc.github.io/cinematics-resources/matrix_morpheus_smith_a/matrix_morpheus_smith_a_|1 to 103|.webp"
            data-background-size="cover"
            data-detector="the_detector">
    </div>
    <hr id="the_detector">
</section>
<!-- CSS FOR DEMO PURPOSE ONLY -->
<style>
    [scroll-frames] { 
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;
    }
    section { 
        height: 200vh;
    }
    hr { opacity: 0 }
</style>

© The Matrix