【jQuery】ページのスクロールに応じて要素を表示する［Scrolla］の使い方

Webページのスクロールに合わせて要素を表示させるjQueryプラグイン［Scrolla］を紹介します。

同様の機能を持つプラグインでは［ScrollReveal］や［jquery.inview］または［WOW.js］などが有名ですが、これらと肩を並べて秀逸なので自信を持ってオススメできます。

実際に使ってみたサンプルは コチラからどうぞ。

Download : https://github.com/maximzhurkin/jquery-scrolla

導入方法は以下より。

［Scrolla］の使い方

［Scrolla］のアニメーション部分は［animate.css］に依存します。
つまり必要になるファイルは3つ。

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

これらのファイルを予め読み込んでおきます。

<link rel="stylesheet" href="animate.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scrolla.jquery.min.js"></script>

各ファイルは次のリンク先から入手可能です。

• scrolla.jquery.min.js : https://github.com/maximzhurkin/jquery-scrolla
• Animate.css : https://daneden.github.io/animate.css/

［Scrolla］で動かす要素を作る

［Scrolla］のアニメーションで表示させる要素は次のように記述します。

<div class="animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s" data-offset="100">

このときにカスタムデータ属性を使ってアニメーションの種類や各種オプションを指定できる点がポイントです。

オプション設定

追加で指定できるオプションは２つ。

$('.animate').scrolla({
	 mobile: false,
	 once: false
});

「mobile:false」と指定するとスマホ等のデバイスのときには起動しなくなります。
また「once: false」と指定するとリセット機能が無効になり、アニメーション表示が一度だけになります。

独自データ属性を使ってオプションを指定することで、スクリプト部分が簡潔になるのが特徴の１つですね。

容量も軽く簡単に扱えますので、冒頭で挙げた［ScrollReveal］、［jquery.inview］、［WOW.js］などの代替案として検討してみてはいかがでしょうか。