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