スクロールに連動したアニメーションを実現するには？
アニメーション、したいですよね。いまウェブサイトにアニメーションを実装するのに何がいいのか？を考えてみました。
必須で実現したいこと
個人的には以下です。
- 手軽に導入できる
- スクロールの可視領域に入ったらアニメーションスタートする
- モバイルでON / OFFが切り替えられる
- 複雑なアニメーションもできる
選択肢は？
WOW.js + animate.css
スクロールが可視領域に入ったらアニメーションをスタートする機能はWOW.jsで、アニメーション自体はanimate.cssで実現する方法です。HTMLの要素にクラス名を指定するだけで実現できるので非常に手軽です。下記の記事が詳しく説明してくれています。
「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう
wow.jsとanimate.cssを使ってアニメーションをつける方法
| 手軽さ | ◎ |
| スクロールの可視領域に入ったらアニメーションスタートする | ○ |
| モバイルでON / OFFが切り替えられる | ○ |
| 複雑なアニメーションもできる | △ |
Delighters.js + CSSアニメーション
CSSアニメーションを自分で書きたいという場合はDelighters.jsが便利かと思います。
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
HTMLでアニメーションを与える要素に「data-delighter」を加えるとデフォルト（.delighter）, アニメーションスタート時（.started）,アニメーション終了時（ .ended）のクラスがスクロールに応じて付与されるので、好きなアニメーションをCSSで記述できます。
また、optionを指定することでビューポートのどのラインに要素が来たときにクラスが付与されるか設定することができます。モバイルでアニメーションをオフにするオプションは用意されていないようなので、こちらは自前で設定する必要がありそうです。（jsでモバイル判定してモバイルならdelighter.jsを読み込ませないようにする）
| 手軽さ | ○ |
| スクロールの可視領域に入ったらアニメーションスタートする | ○ |
| モバイルでON / OFFが切り替えられる | ✕ |
| 複雑なアニメーションもできる | ○ |
waypoint.js +CSSアニメーション + anime.js
waypoint.jsはスクロール時に画面の指定位置にきたかどうかを判別し、自分の好きなfunctionをJavaScriptで記述させることができます。カスタマイズしやすいので、CSSと組み合わせたりanime.jsとの組み合わせたりしやすいです。
【jQuery】waypoint.jsとCSSでスクロールして画面指定位置で要素をアニメーションさせる
| 手軽さ | △ |
| スクロールの可視領域に入ったらアニメーションスタートする | ○ |
| モバイルでON / OFFが切り替えられる | ✕ |
| 複雑なアニメーションもできる | ◎ |
こちらもモバイルでON / OFFが切り替えられる機能がデフォルトでは用意されていないようだったので、カスタマイズしてみました。
waypoint.js でスクロールに連動してクラス名を付与し、mobile ON / OFF 機能をつけるカスタマイズ
waypoint.jsとanime.jsを使って、スクロールで指定位置にきたらアニメーションが開始するデモ（作成中）
まとめ
なるべく手軽に実装したい場合は「WOW.js + animate.css」、CSSアニメーションを自分で書きたい場合は「Delighters.js + CSSアニメーション」、jsも使っていろいろカスタマイズしたい場合は「waypoint.js +CSSアニメーション + anime.js」でしょうか。
以上です。