はじめに
12月3日は、ワン・ツー・スリーということで、奇術の日らしいですよ！
今回は、奇術にちなんでスクロール連動型コンテンツを作成するときに便利なJavaScript（以下、js）ライブラリ「ScrollMagic」や、その他の類似ライブラリについて調べてみました。
この時期はクリスマス向けのコンテンツや年賀コンテンツなどで、コンテンツのスクロール量に応じて演出が展開するような特別なページを作成する機会が多いと思いますが、そんな時に実装を少し楽しく（楽に！）してくれるライブラリを利用してみるのはいかがでしょうか。
スクロール連動型コンテンツ向けJavaScriptライブラリ7選
スクロール連動型コンテンツを作成する際に便利な、jQueryなどの他のライブラリに依存しない、非依存型のjsライブラリを7つピックアップしてみました。掲載順はGithubスター数（※2018年12月現在）で、「サポート」は部分的に動作可能な環境も含まれた内容です。サイズはgithubに公開されているソースコードで、圧縮（minify）された配布ファイルのサイズを参照しています。
| 名称 | サイズ （約KB） |
スター数 （約） |
サポート | ライセンス | 概要 |
|---|---|---|---|---|---|
| ScrollReveal | 16.2 | 16600 | IE10+ | GPL 商用 |
演出用css必要無し 商用あり アップデート多め |
| ScrollMagic | 17 | 10400 | IE9+ | MIT GPL |
高機能 アップデート多め |
| Waypoints | 8.8 | 9500 | IE9+ | MIT | 軽量 老舗の安定感 アップデート停滞気味 |
| WOW.js | 8.2 | 8600 | IE9+ | GPL 商用 |
animate.cssが必要 IE10以上推奨 アップデート停滞気味 |
| AOS | 14.3 | 7900 | IE10+? | MIT | オリジナルcss 現在ベータ版v3が進行中 安定版v2 |
| in-view.js | 5.2 | 4300 | IE9+ | MIT | アップデート停滞気味 |
| ScrollOut | 2.4 | 440 | IE11+ | MIT | モダンブラウザ向け アップデート多め 類似にsal.jsやdelighters |
ここで言う「スクロール連動」とは、閲覧者のページ上のでのスクロール（量）を検知し、特定の量やビューポート（ブラウザの表示領域）内に特定の要素が検知されたときに、特定のイベントや演出が展開されるコンテンツ。としています。
ScrollReveal
ScrollReveal は、他の類似ライブラリに比べてスター数も多く、頻繁にアップデートも行われているようで、2018年12月現在のバージョンは4.0.5。非商用はGNU GPL v3。商用ライセンスも用意されています。
アニメーションなど演出処理もjsに含まれた演出一体型ライブラリで、別途cssを読み込む必要はないので、手軽に使用できるのがメリット。他のライブラリと同様に、スクロール・要素検知イベントが用意されているので、イベント発火時に要素にセレクタを付与して、演出系スタイルやjsと連携することもできます。
See the Pen Xmas Carol Lyrics with ScrollReveal by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
少量のコードでスクロール連動コンテンツを実装できるところは長所だと思います。ただ使いやすさを優先しているせいか、カスタマイズ性が低めなのと、モーションのバリエーションが少ないので、これらの点が改善されると良いなと思いました。
ScrollMagic
ScrollMagic も人気のライブラリで、頻繁にアップデートも行われています。2018年12月現在のバージョンは2.0.3。ライセンスは、MITとGPLのデュアルライセンスです。
アニメーションなどの演出処理はライブラリに含まれていないので、GSAP（TweenMaxなど）、Velocity.jsなどの演出系jsライブラリや、animate.cssなどの演出系cssライブラリと連携して実行します。
See the Pen Xmas Carol Lyrics with ScrollMagic by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
少しサイズが大きいですが、多機能で他のライブラリとの連携も取りやすいのが良いです。少し凝った演出やインタラクションが必要な場合にはおすすめのライブラリだと思います。
Waypoints
Waypointsは、スクロール連動系統では古株の人気ライブラリですが、2年ほど前から目立ったアップデートは行われていません。2018年12月現在のバージョンは4.0.1。ライセンスは、MITです。
軽量で手軽、そしてjQuery版も用意されていることから、今でも多くの現場で利用される人気のライブラリだと思います。演出分離型です。
See the Pen Xmas Carol Lyrics with Waypoints by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
とにかく要素の検出をしたい時は、とりあえずWaypointsを使っておけば良いという安定感があります。今後はモダンブラウザ向けなどの他のライブラリが使用されることが多くなると思いますが、うまく動作しなかった時などの安定の一手として、使い方を覚えておくのも良いと思います。
WOW.js
WOW.jsも、Waypointsと同様に老舗なライブラリですが、最近は目立ったアップデートが行われていません。2018年12月現在のバージョンは1.1.3。ライセンスは非商用はGPL、商用版も用意されています。
軽量なライブラリで、アニメーションなどの演出はanimate.cssを基本としていますが、他のライブラリと同様に対象要素にセレクタを付与するシンプルな仕組みで作られているので、animate.css以外の演出系スタイルシートに差し替えることも可能です。HTML5要素のカスタム属性でWOWの一部の制御系設定を指定できるので、jsに慣れていない人でも手軽に利用できるでしょう。
See the Pen Xmas Carol Lyrics with WOW.js by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
要素が画面内に入って演出が起動するときは、class属性に「animated（※デフォルト）」セレクタが付与されるだけというシンプルな規約なので、animate.css以外にも様々な演出スタイルと連携できるのが良いですね。上のデモの最初の5つのセクションは、自前のフェードインアニメーションで実行しています。後半はanimate.cssのアニメーションです。バリエーション豊かですね。
ScrollReveal同様に非常に少量のjsコードの記述で良く、jsに慣れていない人でも利用できるように配慮されていると思います。反面、jsで色々とカスタマイズしたい場合は少し物足りないかもしれません。
AOS
AOSも人気のライブラリで、現在v3がベータ版で公開されていますが、すぐに利用するなら安定版のv2を利用しても良いでしょう。ライセンスは、MIT。
演出は制御系処理が記載されたaos.jsとは切り離され、同時に配布されているオリジナルのaos.cssを利用します。WOW.js同様にHTML5要素のカスタム属性で制御系設定を指定できるのが特徴です。
See the Pen Xmas Carol Lyrics with AOS by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
scrollRevealやWOW.jsと同様に、なるべくjsを記述しなくても実装ができるように配慮されたライブラリです。アニメーション用のcssも用意され、その指定方法も簡単なので、初めてスクロール連動コンテンツを作成する場合にはお勧めです。ただ、ビューポートリサイズ時の処理に弱いので、動的に要素の高さが変わるコンテンツの場合は注意が必要です。
in-view.js
in-view.jsは、他の類似ライブラリとは少し毛色が異なり、DOM要素同士の交差状態を監視するIntersectionObserver APIの代替手段の1つとなることを目指して作成されたようです。ここ2年ほど更新はされていません。ライセンスは、MIT。
演出処理との連携はWaypointsなどの他のライブラリと同様に、イベント駆動時のコールバック関数内で処理することになります。また、ライブラリサポートの注意点として、DOM変更後の可視（visibility）チェックにMutationObserver APIを利用しているようで、このAPIがサポートされていないIE9とIE10は、Custom Elements (v1) Polyfillが必要になるとのことです。
See the Pen Xmas Carol Lyrics with in-view.js by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
Waypointsのような安定感があると思いますが、jsによる実装がメインになるので、jsによる実装に慣れていない人には少し敷居が高いかもしれません。
このライブラリは要素の監視処理をスクロール毎時ではなく、100msごとに実行してブラウザの負荷を減らすとともに、リサイズ時のトリガー（要素交差判定）のズレが起こらないようにもしているので、要素の高さが動的に変化するコンテンツの場合に是非利用を検討したいライブラリだと思います。
ScrollOut
ScrollOutは、cssカスタムプロパティ（変数）などを利用しているなど、モダンブラウザ向けのライブラリです（IE11以上）。超軽量で、わずか2.4KB。ライセンスは、MIT。
モダンブラウザ向け、超軽量で設計された類似ライブラリにsal.jsやdelightersがありますが、デモがいい感じだったという単純な理由でこちらを選びました。
レガシーなブラウザを考慮しない作品であれば、これらのライブラリを試しつつ、通常あまり関わることの少ないIntersectionObserver APIやMutationObserver API、CSSカスタムプロパティなどに触れる良い機会になるかもしれません。
See the Pen Xmas Carol Lyrics with ScrollOut by Takayasu.B (@untspringk) on CodePen.
[個人的な感想]
非常に少ないコードで実装できることや、jsでもcssでも連携がしやすく、特にスクロール量とcssカスタムプロパティとの連携は、より閲覧者の操作と演出との連携を実現しやすくなると思います。これまでもjsで実現可能でしたが、要素検知などの制御系をjsで、演出などのふるまいをcssで、といった処理の分担がより明確にできるようになるでしょう。
おわりに
本記事は以上になります。各ライブラリの最低限の機能しか紹介できていないし、検証もちゃんとしていない内容で恐縮ですが、スクロール連動や要素監視系の実装が必要なときの参考になれば幸いです。
今年も残すところわずかですね。
それでは、また。