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

Advertisement

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「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アニメーションの勉強と準備をしとかないとなぁと思う今日このごろでした。

では、Enjoy the movement on the web!

更新情報

  • 他のライブラリの例としてDeligher.JS を追加しました。(2018/3/17)

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です