スクロールで発火するjQuery「Scrolla」でアニメーションさせる方法
スクロールで発火するjQueryのプラグインは多くありますが、軽量でカスタマイズも簡単な「Scrolla」をご紹介します。
Scrollaは、animate.cssをスクロールで視界に入ったときに発火するjQueryのプラグインです。
同様のスクロール発火スクリプトは多いのですが、Scrollaは軽量で使いやすいため、2年前からよく使っています。
まずは、Scrollaのデモをご覧ください。
Scrollaの特長
- データ属性「data-animate」のセレクタがclassに追加されるだけなので、animate.css以外のアニメーションを発火させることも可能。
- スマートフォンのON・OFF機能が簡単
- IEにも対応
- keyframesのアニメーションのコントロール可能。ディレイなど。
transitionの場合はディレイを使っても効かない。少々カスタマイズが必要。 - ファイルサイズが軽量
Scrollaの使い方
Scrollaとanimate.cssをダウンロードして、読み込めばOKです。
HTML
<link rel="stylesheet" href="animate.min.css">
<script src="jquery.min.js"></script>
<script src="scrolla.jquery.min.js"></script>
続いて、JavaScriptのオプションを記載します。
JavaScript
<script>
$('.animate').scrolla({
mobile: false, // モバイルの有効・無効
once: false // 発火は１度だけか、視界に入るたびに発火させるか
});
</script>あとはアニメーションさせるタグのCSSに「animate」を記載します。
HTML
<div class="animate"></div>アニメーションのディレイなどはデータ属性で調整できます。
HTML
<div class="animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s" data-iteration="infinite">Scrollaのデータ属性
タグにデータ属性を追記することで、アニメーションを選択したり、アニメーションを微調整することができます。
| data-animate | 適用するanimate.cssのセレクタを指定します。複数指定も可能です |
| data-duration | CSSのanimation-duration（長さ）を調整できます |
| data-delay | CSSのanimation-delay（開始時間）を調整できます |
| data-iteration | CSSのanimation-iteration-count（繰り返す回数）を調整できます。infiniteを設定すると無限に繰り返します |
最新版からデータ属性のセレクタがclassに追加される時に「animate__」が追加されるようになりました。
