ScrollyVideo.jsは、ユーザーのスクロール操作に連動して動画を再生・制御するためのJavaScriptライブラリです。Webサイトにインタラクティブで没入感のある体験を提供し、AppleのAirPods Proの紹介ページのような、スクロールに応じた動画アニメーションを簡単に実装できます。
React、Svelte、Vue.jsといったモダンなフレームワークや、素のHTML環境でも動作し、WebCodecs APIやHTML5の<video>タグを適宜利用して、最適なパフォーマンスを実現します。
基本的な使い方
インストール
1. CDNを利用する
手軽に試すならCDNが便利です。HTMLファイルに以下のスクリプトを追加します。
<script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js"></script>2. npm / Yarn でインストールする
プロジェクトに組み込む場合は、パッケージマネージャーを使用します。
# npm
npm install scrolly-video
# Yarn
yarn add scrolly-videoHTMLの構造
ScrollyVideo.jsを使用するための基本的なHTML構造は以下の通りです。
<div id="scrolly-container">
<video src="path/to/your/video.mp4" playsinline muted></video>
</div>id="scrolly-container": ScrollyVideoのコンテナ要素。任意のIDを指定できます。videoタグ: 再生したい動画ファイルを指定します。playsinlineとmuted属性は、特にモバイルデバイスでの自動再生に重要です。
JavaScriptでの初期化
HTMLを記述したら、JavaScriptでScrollyVideo.jsを初期化します。
new ScrollyVideo({
scrollyVideoContainer: "scrolly-container",
src: "path/to/your/video.mp4"
});scrollyVideoContainer: HTMLで指定したコンテナのIDsrc: 動画ファイルのパス
これだけで、スクロールに連動してビデオが再生されるようになります。
主要なオプション
ScrollyVideo.jsは、ビデオの挙動を細かく制御するためのオプションを提供しています。
| オプション | 説明 | デフォルト値 |
|---|---|---|
cover | 動画がコンテナ全体を覆うように表示するかどうか。 | true |
sticky | スクロール中にビデオをコンテナの上部に固定するかどうか。 | true |
full | コンテナがビューポート全体の高さと幅に広がるかどうか。 | true |
trackScroll | スクロールイベントに自動的に応答するかどうか。 | true |
transitionSpeed | 動画が異なるポイント間を遷移する速度。 | 8 |
frameThreshold | 動画アニメーションを停止するタイミング（秒）。 | 0.1 |
useWebCodecs | よりスムーズなアニメーションのためにWebCodecs APIを使用するかどうか（Chromeでのみ利用可能）。 | true |
debug | コンソールにデバッグ情報を出力するかどうか。 | false |
これらのオプションは、new ScrollyVideo()の引数にオブジェクトとして渡します。
new ScrollyVideo({
scrollyVideoContainer: "scrolly-container",
src: "path/to/your/video.mp4",
cover: false,
transitionSpeed: 16
});応用的な使い方
他の要素との連携
ScrollyVideo.jsは、動画の再生だけでなく、スクロール位置に応じて他のHTML要素をアニメーションさせることも可能です。
onscrollイベントを使用して、現在の動画の再生率（currentTime / duration）を取得し、それに基づいて他の要素のスタイル（例：opacityやtransform）を変更します。
const scrollyVideo = new ScrollyVideo({
scrollyVideoContainer: "scrolly-container",
src: "path/to/your/video.mp4"
});
window.addEventListener("scroll", () => {
const percentage = scrollyVideo.video.currentTime / scrollyVideo.video.duration;
const elementToAnimate = document.getElementById("animated-element");
// スクロール位置に応じて要素をフェードインさせる
elementToAnimate.style.opacity = percentage;
});まとめ
ScrollyVideo.jsは、スクロール連動型の動画コンテンツを驚くほど簡単に実装できる強力なライブラリです。基本的な設定は非常にシンプルでありながら、オプションやイベントを活用することで、創造性豊かなインタラクティブ表現が可能になります。
