Rola は、スクロールマネジメントライブラリです。 IntersectionObserver によるビューポート内の要素の監視とスクラブ機能をパフォーマンスに考慮して提供します。
Rola は スクロールによる要素の状態を HTML の属性や CSS カスタムプロパティにセットすることにフォーカスしているため、 あとは、あなたの CSS の知見を使って自由にアニメーションを作成することが可能です。
Rolaの詳しい使い方はドキュメントをご確認ください。
<script src="https://cdn.jsdelivr.net/npm/@hilosiva/rola@0.2.5/dist/rola.min.js" defer></script>npm i -D @hilosiva/rola
import Rola from "@hilosiva/rola";スクロールアニメーションをトリガーしたい HTML の要素をセレクターとして、Rola に要素の監視を登録します。
<div data-rola-trigger>...</div>new Rola("[data-rola-trigger]");これで、トリガー要素に data-rola-inview="false" がセットされ、トリガー要素がビューポート内に入った時に、data-rola-inview が true に切り替わります。
関数を使って動的にスタイルを適用できます：
new Rola("[data-rola-trigger]", {
scrub: true,
styles: {
transform: (progress) => `translateX(${progress * 100}px)`,
opacity: (progress) => `${progress}`
}
});複数の要素に個別のスタイルを適用できます：
new Rola("[data-rola-trigger]", {
scrub: true,
targets: [
{
selector: ".element1",
styles: {
transform: (progress) => `translateX(${progress * 100}px)`
}
},
{
selector: ".element2",
styles: {
opacity: (progress) => `${progress}`
}
}
]
});オブジェクト形式でvelocity情報も利用できます：
new Rola("[data-rola-trigger]", {
scrub: true
}, ({ element, progress, velocity }) => {
console.log(`Progress: ${progress}, Velocity: ${velocity}`);
});prefers-reduced-motionメディアクエリに対応し、ユーザーの視差効果軽減設定を自動的に尊重します：
new Rola("[data-rola-trigger]", {
scrub: true,
respectReducedMotion: true, // デフォルト: true
styles: {
transform: (progress) => `translateX(${progress * 100}px)`
}
});ユーザーがシステム設定で「視差効果を減らす」を有効にしている場合、stylesの適用が自動的にスキップされます。強制的にアニメーションを実行したい場合は respectReducedMotion: false を設定してください。
v0.2.2の改善: スクラブ実行中にユーザーが設定を変更した場合、既に適用されているスタイルも自動的にクリアされるようになりました。
MIT License