| title | description | layout | category | order |
|---|---|---|---|---|
Cinematics |
Playhead moves once the detection element gets entirely into the viewport. |
libdoc/page |
Examples |
129 |
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>{:.playground .playground-pin title="D A R K"}
© 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>{:.playground .playground-pin title="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>{:.playground .playground-pin title="The Matrix - Morpheus and Smith"}