ScrollTriggerは、ページのスクロールに応じて、要素をアニメーションさせながら表示できるようになるスクリプトです。
動きについては、デモページをご参照ください。下にスクロールしていくと、要素がアニメーションしながら表示されます。
ScrollTriggerの使い方
スクリプトの設置と読み込み
GitHubからスクリプトをダウンロードして、ScrollTrigger.min.jsをサーバー上に設置します。
ScrollTrigger.min.jsを設置したら、HTMLの</body>の直前に以下を記述します。
<script src="ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
var trigger = new ScrollTrigger();
});
</script>
アニメーションさせる要素のマークアップ
アニメーションさせたい要素には、以下のようにdata-scroll属性を追加します。
<div data-scroll="">アニメーションさせたい要素</div>
CSSでアニメーションの調整
CSSでアニメーションを調整します。
.invisible {
transition: opacity 0.5s ease;
opacity: 0.0;
}
.visible {
transition: opacity 0.5s ease;
opacity: 1.0;
}
上記はGitHubで紹介されている例ですが、「要素がウインドウ内に入ったら、0.5秒かけて透明度がなくなっていく」というアニメーションになります。
ScrollTriggerのオプション
ScrollTriggerには様々なオプションも用意されています。
| toggle() | 付与クラスの変更 |
|---|---|
| offset() | オフセット |
| addWidth | オフセットに要素の横幅を追加 |
| addHeight | オフセットに要素の高さを追加 |
| centerHorizontal | オフセットの左右中央値を取得 |
| centerVertical | オフセットの天地中央値を取得 |
| once | 1度だけアニメーションを実行 |
詳しくは、GitHubの説明をご参照ください。
あとがき
縦に長いサイトなんかでは、動きがないと単調になってきますので、アニメーションがあるとより下にスクロールしてみたくなるかもしれませんね。
jQueryプラグインですが、ScrollMeも同じように要素にアニメーションが実装できて便利です。ぜひScrollMeもチェックしてみてください。