ScrollyVideo.js
ScrollyVideo.jsはスクロールと動画を同期させるJavaScriptライブラリです。スクロールすると動画が再生する、ではなくて、スクロールに応じて動画が進む感じです。
このライブラリは、特別なビデオエンコーディング形式を使用せずに、スクロールに応じた動画再生のUX作成を提供する、というものになります。
使い方もすごく簡単です。以下のように任意の要素を用意します。
<div id="scrolly-video"></div>
あとは、ライブラリを読み込んで上記要素を指定し、使いたい動画ファイルを設定するだけです。
<script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js"></script>
<script type="text/javascript">
new ScrollyVideo({
scrollyVideoContainer: "scrolly-video",
src: "https://scrollyvideo.js.org/goldengate.mp4"
});
</script>あとはCSSでレイアウトを整えればOKです。Vanillaはもちろん、React、Svelte、Vueといったフレームワークでも利用可能です。
自動で勝手に再生する悪質性もないし、自然と動画でアピール出来て良い気がしますね。ライセンスはMITとの事です。