ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

スクロールで発火するjQuery「Scrolla」でアニメーションさせる方法

スクロールで発火するjQueryのプラグインは多くありますが、軽量でカスタマイズも簡単な「Scrolla」をご紹介します。

Scrollaは、animate.cssをスクロールで視界に入ったときに発火するjQueryのプラグインです。

同様のスクロール発火スクリプトは多いのですが、Scrollaは軽量で使いやすいため、2年前からよく使っています。

まずは、Scrollaのデモをご覧ください。

Scrollaの特長

  • データ属性「data-animate」のセレクタがclassに追加されるだけなので、animate.css以外のアニメーションを発火させることも可能。
  • スマートフォンのON・OFF機能が簡単
  • IEにも対応
  • keyframesのアニメーションのコントロール可能。ディレイなど。
    transitionの場合はディレイを使っても効かない。少々カスタマイズが必要。
  • ファイルサイズが軽量

Scrollaの使い方

Scrollaanimate.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 // 発火は1度だけか、視界に入るたびに発火させるか
});
</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__」が追加されるようになりました。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ