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との事です。

ScrollyVideo.js