手軽にページスクロールに応じてアニメーション表示する[scrolla.js]

LP等でよく見かけるWebページをスクロールして表示領域に入ったらアニメーションが開始される演出。

そんな演出を超お手軽に実装可能なjQueryプラグイン[Scrolla]を紹介します。

3つの必要ファイルの読み込み

<link rel="stylesheet" type="text/css" href='css/animate.min.css'/>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/scrolla.jquery.min.js'></script>

[Scrolla]でアニメーションを実装するのに必要なファイルは、次の3つです。

• animate.css
• jquery.js
• scrolla.jquery.min.js

[Scrolla]はjQueryプラグインのため、まずはjQuery本体。
アニメーションは[animate.css]に依存するため、こちらも必要になります。

関数の呼び出し

上記3ファイルの読込後であればHTMLに直接でも、別ファイルでもお好みで。

<script type="text/javascript">
    $(function(){
        $('.selecter').scrolla();
    });
</script>

アニメーションさせたい要素に以下のように記述

ブロック要素だけでなく、インライン要素にも適用可能です。

<div class='selecter' data-animate="bounceIn" data-duration="1.0s" data-delay="0.5s">animate div</div>

カスタムデータ属性を使って以下の要素が調整可能

• data-animate
  アニメーションの種類
  どんなアニメーションの種類があるかはanimate.cssで確認しながら感覚的に実装可能です。
• data-duration
  アニメーションが実行される時間の長さ
  上記の場合1秒かけてアニメーションする
• data-delay
  アニメーションが開始されるまでの待ち時間
  上記の場合0.5秒後からアニメーションが開始される
• data-offset
  アニメーションが開始されるまでのスクロール距離
  data-offset="300"の場合、本来の実行座標から300px分スクロールされた段階でアニメーションが開始される。スクロールの上下は問わない
• data-iteration
  アニメーションの繰り返し回数
  通常は1回で終わるアニメーションを繰り返したいときに使用する。
  data-iteration="3"の場合は3回アニメーションして（一旦）停止する

たったのこれだけでこんな感じのステキアニメーションが実装完了です！

若干IE11ではアニメーションの種類によって処理落ちが見られましたが、スマートフォンでも違和感なくアニメーションしますので即実践投入して問題ないでしょう。

また、上記のコードサンプルではセレクタにHTMLクラスを使用していますが、以下のようにカスタムデータ属性でも問題なくセレクタとして使用可能です。

$('[data-scrolla]').scrolla();

<div data-scrolla data-animate="fadeIn" data-duration="1.0s" data-delay="0.1s">animate div</div>

オプションは以下のものが用意されています

$('[data-scrolla]').scrolla({
    mobile: false,
    once: true
});

• mobile
  モバイルデバイスでアニメーションを動作させるか
• once
  スクロール表示させる度にアニメーションを動作させるか
  trueの場合は1度だけになります

スクリプトの容量も小さく、実装もjQueryが使える環境であれば後付けで手軽に行えるので非常におススメです。LPにもう少しだけスパイスを加えたいときなど、機会があったら是非試してみてください！