シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「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 });ブラウザ・サポート
CSS TransformとTransitionsをサポートするブラウザならOKということで、ほとんどのモダン・ブラウザとIE10以上のブラウザをサポートします。
CSS TransitionsのサポートがIE10からなので、それに依存するScrollRevealもIE10以上が必須なんですね。
アニメーションがなくてもページの機能を損なわなければ問題ないので、IE9以下ではスクリプトを読み込まないようにするなど配慮しておけば良さそうです。ちなみに、IE9以下で見ても何も起こりません。
設定できるオプションの一覧
| オプション | デフォルト値 | 説明・備考 |
|---|---|---|
| origin | ‘bottom’ | アニメーションの起点。 オプション: ‘top’, ‘bottom’, ‘left’, ‘right’ |
| distance | ’20px’ | アニメーションの距離。CSSで有効な単位（rem、%、vwなど）が使える |
| duration | 500 | アニメーションの長さ（ミリ秒 / 1秒 = 1000） |
| delay | 0 | アニメーションの遅延 |
| rotate | { x: 0, y: 0, z: 0 } | 要素を回転させる |
| opacity | 0 | アニメーションが始まるときの透明度 |
| scale | 0.9 | アニメーションが始まるときのスケール |
| easing | ‘cubic-bezier(0.6, 0.2, 0.1, 1)’ | イージング（参考）。 オプション: ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’ |
| container | html要素 | アニメーションを実装するコンテナを指定できる。html要素がデフォルトの親要素（コンテナ） |
| mobile | true | falseにするとユーザーエージェント文字列で判別されたモバイルデバイスでアニメーションを停止できる |
| reset | false | falseの場合、アニメーションが1度だけ実行される。trueの場合は表示されるたびにアニメーションが実行される |
| useDelay | ‘always’ | 遅延を実行する条件。 オプション： ‘always’, ‘once’, ‘onload’ |
| viewFactor | 0.2 | アニメーションを開始するために表示が必要な要素の割合。0.2 = 20% |
| viewOffset | { top: 0, right: 0, bottom: 0, left: 0 } | 要素のオフセット。固定のナビゲーションバーがある場合などに使う |
mobileオプションについて
ソースコードを見たら、以下のユーザーエージェント文字列でモバイルデバイスを判別するようになってました。画面サイズで設定したい場合は他の方法で判別が必要です（matchMediaとかがいいですかね）。
Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Miniまとめ
以上、ちょっとした動きをサクッと実装したいときに便利なライブラリ「ScrollReveal」のご紹介でした。ちょっとしたアニメーションだけでもページの雰囲気や印象を変えることが出来るので重宝しそうです。センス必要ですけど。
ちょっと余談
PWAがWebkitでも実装可能になるので本格的に普及段階に入るかもしれません。そうなるとウェブ・アニメーションの需要もいまより更に上がると思います。いろいろ準備しとくと良さそうですね。
今回紹介したScrollRevealは、スクロールが必要なウェブページのシンプルなアニメーション向けですが、様々なニーズに応えられるようにCSSアニメーションの勉強と準備をしとかないとなぁと思う今日このごろでした。
※この記事は「スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」」の転載です。
タイトルおよびリード文はWPJ編集部によるものです。
Copyright ©️ 2018. Ryo Watanabe.
