ScrollTriggerは、ページのスクロールに応じて、要素をアニメーションさせながら表示できるようになるスクリプトです。
動きについては、デモページをご参照ください。下にスクロールしていくと、要素がアニメーションしながら表示されます。
ScrollTriggerの使い方
スクリプトの設置と読み込み
GitHubからスクリプトをダウンロードして、ScrollTrigger.min.jsをサーバー上に設置します。
ScrollTrigger.min.jsを設置したら、HTMLの</body>の直前に以下を記述します。
1 2 3 4 5 6 | <script src="ScrollTrigger.min.js"></script><script>document.addEventListener('DOMContentLoaded', function(){ var trigger = new ScrollTrigger();});</script> |
アニメーションさせる要素のマークアップ
アニメーションさせたい要素には、以下のようにdata-scroll属性を追加します。
1 | <div data-scroll="">アニメーションさせたい要素</div> |
CSSでアニメーションの調整
CSSでアニメーションを調整します。
1 2 3 4 5 6 7 8 9 | .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もチェックしてみてください。