ScrollyVideo.jsは、スクロールと動画を連動させられるJavaScriptライブラリです。スクロール量に応じて動画が進んだり戻ったりします。
挙動については、ScrollyVideo.jsのサイトでご確認いただけます。
ScrollyVideo.jsの使い方
HTMLのマークアップ
まずは、動画を描画する要素をHTMLに記述します。
<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>スタイルの調整
#scrolly-videoには下記CSSが適用され、position:stickyで動画がスクロール追尾するようになっています。
display: block;
position: sticky;
top: 0px;
width: 100%;
height: 100vh;
overflow: hidden;その中に動画が描画されます。HTMLは下記のようになります。
<div id="scrolly-video" style="display: block; position: sticky; top: 0px; width: 100%; height: 100vh; overflow: hidden;">
<video src="https://scrollyvideo.js.org/goldengate.mp4" preload="auto" tabindex="0" playsinline="" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 101%; min-height: 101%; height: 100%; width: auto; display: none;"></video>
<canvas width="1920" height="1080" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 101%; min-height: 101%; height: 100%; width: auto;"></canvas>
</div>そのままだとすぐに動画エリアを過ぎ去ってしまい再生されませんので、動画エリアの親要素の高さを出すように調整が必要です。
シンプルにheightで指定しても良いですし、中に配置する要素の余白で調整してもOKです。デモでは、中に配置されている要素の余白で調整されているようです。
あとがき
あまり見かけないタイプでなかなかおもしろいライブラリですね。
スクロールと動画を連動させた一風変わったサイトを作成したい時は、ぜひご活用ください。