スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal 」というやつです。

無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。

ScrollRevealのいいところ

• 3.3KB（minified / gzipped）で軽量
• 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない
• 実装がシンプル
• アニメーションを細かく調整できる
• まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてあります が…）

animate.css のようなCSSアニメーションのライブラリと連携させるスクリプト や他にもAOS とかDelighters.JS とかもあるんですが、単体でサクッとアニメーションを実装したいときにはScrollRevealが良さそうです。すでにサイトでanimate.cssやjQueryを使っている場合はAniView もありかもしれませんけど。

設置方法

JavaScriptを読み込んで簡単なスクリプトを記述するだけで、ページスクロールをトリガーとしたアニメーションが実装可能です。

ライブラリの読み込み

<script src="js/scrollreveal.min.js"></script>

アニメーションする要素へのclass指定

<div class="animate">アニメーションする要素</div>

アニメーションの実行

<script>
  window.sr = ScrollReveal();
  sr.reveal('.animate');
</script>

これだけで簡単なアニメーションを実装できます。

各種オプションは以下のように指定します。

sr.reveal('.animate', { easing: 'ease', duration: 2000, distance: '400px', opacity: 1, scale: 1 });

設定できるオプションの一覧

mobileオプションについて

ソースコードを見たら、以下のユーザーエージェント文字列でモバイルデバイスを判別するようになってました。画面サイズで設定したい場合は他の方法で判別が必要です（matchMediaとかがいいですかね）。

Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini

まとめ

以上、ちょっとした動きをサクッと実装したいときに便利なライブラリ「ScrollReveal」のご紹介でした。ちょっとしたアニメーションだけでもページの雰囲気や印象を変えることが出来るので重宝しそうです。センス必要ですけど。

ちょっと余談

PWAがWebkitでも実装可能になる ので本格的に普及段階に入るかもしれません。そうなるとウェブ・アニメーションの需要もいまより更に上がると思います。いろいろ準備しとくと良さそうですね。

今回紹介したScrollRevealは、スクロールが必要なウェブページのシンプルなアニメーション向けですが、様々なニーズに応えられるようにCSSアニメーションの勉強と準備をしとかないとなぁと思う今日このごろでした。

では、Enjoy the movement on the web!