ITTI STAFF
BLOG

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

軽量で使いやすいスクロールで発火するアニメーションScrolla

スクロールで発火するjQueryのプラグインは多くありますが、2年前からよく使っている「Scrolla」をご紹介します。

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

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

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

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-durationCSSのanimation-duration(長さ)を調整できます
data-delayCSSのanimation-delay(開始時間)を調整できます
data-iterationCSSのanimation-iteration-count(繰り返す回数)を調整できます。infiniteを設定すると無限に繰り返します

Scrollaの良いところ

データ属性のdata-animateにはanimate.css以外のセレクタも指定できます。

例えばオリジナルのアニメーションCSSをデータ属性に記述すると、視界に入った時にオリジナルのアニメーションCSSを発火させることができます。

スマートフォンのユーザーにはアニメーションをオフにできます。

スマートフォンの場合、スクロールが早いとアニメーションとスクロールのタイミングが合わないことがあります。地味にありがたい機能です。

新しい記事

東京のWEB制作会社イッティ