LP等でよく見かけるWebページをスクロールして表示領域に入ったらアニメーションが開始される演出。
そんな演出を超お手軽に実装可能なjQueryプラグイン[Scrolla]を紹介します。
Scrolla
[公式]
https://maximzhurkin.github.io/jquery-scrolla/
[GitHub]
https://github.com/maximzhurkin/jquery-scrolla
[公式]
https://maximzhurkin.github.io/jquery-scrolla/
[GitHub]
https://github.com/maximzhurkin/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にもう少しだけスパイスを加えたいときなど、機会があったら是非試してみてください!