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]で動かす要素を作る

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

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

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

オプション設定

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

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

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

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

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