ホームページにアニメーションを実装するライブラリ＆プラグイン12選
- 2017年3月6日
- 467
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 執筆記事一覧はこちら
アニメーションは、もはやホームページを作る上で必須の要素と言えます。
単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。
一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。
今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。
10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。
ぜひ使いやすいライブラリを見つけてみてください。
ホームページにアニメーションを実装するライブラリ＆プラグイン12選
1. Animate.css
https://daneden.github.io/animate.css/
Animate.cssはもっともポピュラーなCSSアニメーションライブラリです。
軽量かつシンプルで、HTML要素に用意されているアニメーション用のclass属性を付加するだけで実装することができます。
特定のアニメーションにはjQueryが必要な場合があるのでご注意ください。
2. Bounce.js
Bounce.jsはCSS3のアニメーションをベースに可愛らしい動きを操作するために作られたJavaScriptのライブラリです。
その名の通り「はねる」ような独特な動きをします。
3. AOS
https://michalsnik.github.io/aos/
AOSはAnimate On Scrollの略で、スクロールイベントでアニメーションを呼び出すことができるCSSとJavaScriptのライブラリです。
スクロールダウンしてアニメーションを開始したあとでも、スクロールを戻すとプレイバックすることができます。
サンプルにもあるように、HTML要素に「data-aos」属性を付加してアニメーションを指定することができます。
4. CSShake
http://elrumordelaluz.github.io/csshake/
CSShakeはホームページ上のあらゆる要素をぶるぶるふるわすことができるCSSベースのアニメーションライブラリです。
Mac上で間違えてパスワードを打ってしまった場合に首を横に振るようにぶるぶると震えるアニメーションから、携帯電話のバイブレーションのように震え続ける激しいアニメーションまで、さまざまな形で震えるアニメーションを実装することができます。
SassのMix-inを使えば高度な設定を行うこともできます。
5. Magic Animations
http://www.minimamente.com/example/magic_animations/
Magic Animationsは、Power Pointで見たことがあるような出現・消失のアニメーションを実装することができるライブラリです。
jQueryを必要としますが、CSSファイルを読み込むだけで準備完了です。
60種類以上の豊富なアニメーションが用意されています。
6. DynCSS
http://www.vittoriozaccaria.net/dyn-css/
DynCSSはスクロールエフェクトを実装することができるCSSプラグインです。
単なるアニメーションとは違うのでこれまで紹介したライブラリとは一線を画します。
オブジェクトを、事前に用意したパスに沿ってスクロールするごとに動かすことができます。
パスはCSS上で規定のルールに従って記述していきます。
7. Hover CSS
http://ianlunn.github.io/Hover/
HoverCSSはその名の通りホバー(マウスオーバー)で動くアニメーションを実装するためのCSSアニメーションライブラリです。
ボタンや他のUI要素に簡単にアニメーションを実装することができます。
マウスを乗せるだけでかなりインパクトのあるアニメーションが表示できるので、CTAボタンなどに実装すればコンバージョン率アップが期待できそうです。
8. Velocity.js
Velocity.jsはフェードやスライド、スクロールなどのさまざまな効果をjQueryで実装することができるアニメーションプラグインです。
jQueryを利用しているので、アニメーションを実装するのに関数や計算なども取り入れることができます。
Velocity.jsはTumblrやWhatsApp、MailChimpなどもホームページで取り入れている実績あるプラグインです。
9. Transit.js
http://ricostacruz.com/jquery.transit/
Transit.jsはCSS3とjQueryを使ったアニメーションプラグインです。
動きがかなり滑らかかつ軽快で、細かい設定まで行えば複雑なアニメーションを実装することができます。
10. GreenSock GSAP
GSAPはGreenSock社が開発したHTML5とJavaScriptをベースにしたアニメーションライブラリです。
GSAPを入れると他のアニメーションプラグインが「安物のおもちゃが動いているように見える」と謳っているほどに、動きはパワフルで軽快です。
11. AniJS
AniJSは70種類以上の豊富なアニメーションが用意されているCSSとJavaScriptのアニメーションライブラリです。
「if: click, do: $toggleClass pink-lgh-bg, to: .demo1」のように、HTMLタグのなかでアニメーションの条件を簡易的にプログラミングすることができます。
12. Snap.svg
Snap.svgは、ブラウザ表示に対応したベクターグラフィックであるSVGをアニメーションとして利用することができるJavaScriptベースのアニメーションライブラリです。
これまで紹介したものがオブジェクトそのものを動かすのに対して、SVGアニメーションはパーツの細かなところも繊細に動かすことができるので、美しいアニメーションを実装することができます。
CSSライブラリと比べると多少のプログラミングの知識が必要ですが、覚えておいて損はなさそうです。
まとめ
以上、ホームページにアニメーションを実装するライブラリ＆プラグインをご紹介しました。
シンプルで導入が簡単なものから、カスタマイズ可能で高度で複雑なアニメーションを実装できるものまで、さまざまなプラグインやライブラリがありましたね。
面白そうなライブラリがあれば、ぜひ利用してみてくださいね。