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

JavaScript jQuery デザイナー テクニック アニメーション

いいね

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にもう少しだけスパイスを加えたいときなど、機会があったら是非試してみてください!




アカウント登録をするとコメント・質問を書くことができます


採用検索 - 詳細条件の設定