スクロールアニメにはjQuery不要でサクッと使える「ScrollReveal.js」が便利

2018/03/30

渡辺 竜

89
スクロールに気の利いた動きを加えたいときに便利なJavaScriptのライブラリー「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 });

ブラウザ・サポート

CSS TransformとTransitionsをサポートするブラウザならOKということで、ほとんどのモダン・ブラウザとIE10以上のブラウザをサポートします。

CSS TransitionsのサポートがIE10からなので、それに依存するScrollRevealもIE10以上が必須なんですね。

アニメーションがなくてもページの機能を損なわなければ問題ないので、IE9以下ではスクリプトを読み込まないようにするなど配慮しておけば良さそうです。ちなみに、IE9以下で見ても何も起こりません。

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

オプションデフォルト値説明・備考
origin‘bottom’アニメーションの起点。
オプション: ‘top’, ‘bottom’, ‘left’, ‘right’
distance’20px’アニメーションの距離。CSSで有効な単位(rem、%、vwなど)が使える
duration500アニメーションの長さ(ミリ秒 / 1秒 = 1000)
delay0アニメーションの遅延
rotate{ x: 0, y: 0, z: 0 }要素を回転させる
opacity0アニメーションが始まるときの透明度
scale0.9アニメーションが始まるときのスケール
easing‘cubic-bezier(0.6, 0.2, 0.1, 1)’イージング(参考)。
オプション: ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’
containerhtml要素アニメーションを実装するコンテナを指定できる。html要素がデフォルトの親要素(コンテナ)
mobiletruefalseにするとユーザーエージェント文字列で判別されたモバイルデバイスでアニメーションを停止できる
resetfalsefalseの場合、アニメーションが1度だけ実行される。trueの場合は表示されるたびにアニメーションが実行される
useDelay‘always’遅延を実行する条件。
オプション: ‘always’, ‘once’, ‘onload’
viewFactor0.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.

渡辺 竜

渡辺 竜

「明日のウェブ制作に役立つアイディア」をテーマに「Rriver」というブログを運営。アメリカの大学を卒業後、1998年に東海岸のボストン近郊でウェブ制作を開始。2001年に帰国後、東京のウェブ制作会社に勤務。その後、事業者側に移り現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わる。

Loading...