アニメーションを実現するJSライブラリをいくつか紹介したい

最近更新をサボっていたので頑張ろうと意気込んでいるYutaです。

最近のWebサイトでは、スクロールに伴って再生されるアニメーションをよく見るようになりました。
アニメーションはむやみに増やすと邪魔でしかないのですが、効果的に差し込むことでユーザの興味を引くことができます。
(学生の頃にプレゼン資料にアニメーション詰め込みまくってたあの頃を思い出します・・・少し黒歴史・・・)

効果的なアニメーションを活用しているサイトはたくさんあります。僕にとって一番記憶に残っているのはAppleのiPhoneXのサイトです。

「何だこれはっ!!かっこよすぎるっ!!!!」と思った僕はいつの間にかiPhoneXを購入していました。なんて効果的なWebサイト。

Webエンジニアとして、アニメーションの波に乗り遅れないために勉強しなければ!と思いこの記事を書き始めました。
非デザイナーなエンジニアでも導入できるアニメーションJSライブラリを紹介していきたいと思います。

「ScrollReveal」

かなり軽量でシンプルなプラグインです。
シンプルにスクロールして要素が見えたらアニメーションをしたいときはこれが使いやすそうです。
方向を指定したフェードイン、時間の指定、ディレイ、など基本的な設定が可能で、回転も行えるので使い勝手が良さそうです。

実装はDOM要素を指定し、JavaScriptの記述で書いていくイメージになります。

「AOS ( Animate On Scroll Library )」

先程のScrollRevealとは異なり、HTMLの属性で実装を行う方式のライブラリです。
JSの記述が基本的に必要ないため、コーディングの量がかなり減ると思います。
アニメーションの種類もフェード、フリップ、ズーム、スライドから選ぶ事ができ、初期設定でもかなりスタイリッシュです。

「ScrollMagic」

超多機能アニメーションライブラリです。ここに簡単に書ききれない程の機能があります。
僕の言いたいことは上記の公式サイトを見ればすぐに分かると思います。
上記のライブラリは要素がスクロールで見えるタイミング(もしくは見えなくなるタイミング)が主な発火タイミングでしたが、こちらはスクロールの位置で厳格にアニメーションの発火や動作を制御できます。
多機能な分、コード量は多いです。学習コストも高いです。一度サンプルページを見てみることをおすすめします。

 

3つのJSライブラリを紹介しました。
本当はもっとあるのでしょうが、今回の記事はとりあえず3つ。

急にこんなことを調べだしたのは、自分のポートレートページを作成しようと企んでいるからです。
そちらの開発工程もブログに載せていけたらいいなと思います。

ではでは