近年、PCのスペックが高まるの共にウェブページの中でアニメーションが使われる機会も増えてきました。複雑なアニメーションは特別なソフトを使って作成しなければなりませんが、簡単なアニメーションならJavaScriptとCSSを組み合わせると手軽にできてしまいます。
今回は、JavaScriptでのアニメーション表示をサポートする、プラグインやライブラリをまとめてみました。
TweenMax
TweenMaxはアニメーションプラットフォーム「GSAP」の1つであり、その性能から複雑なアニメーションも表現することができます。さらに、jQueryのanimateメソッドよりも高速に表示が可能です。
YOUTUBEに紹介動画がアップされていました。まずは試してみたいという方はご覧になってみてください↓
TweenMaxで作成されたアニメーションのサンプルがありました。このくらいのアニメーションであれば、簡単なコードでできてしまうみたいですね。
See the Pen TweenMax animation by PETIT Alexandre (@Apetit) on CodePen.
こちらもTweenMaxで作成されたものですが、ここまで複雑なアニメーションでもJavaScriptはあまり複雑なコードになっていません。
See the Pen Low Poly Fox by Hafiz (@hafizxfattah) on CodePen.
anime.js
軽量ながらもしっかりとしたアニメーションを実現できるライブラリです。PCでの表示は他のプラグインを使った場合でもあまり差はないかもしれませんが、スマホ端末からの表示では軽量であることは大きなメリットです。
映画などの最初に表示されそうな、ロゴを用いたアニメーションです。裏でローディングしながらこういったアニメーションを再生しておくと、ユーザーの離脱率を下げることができますね。
See the Pen anime.js logo animation by Julian Garnier (@juliangarnier) on CodePen.
タップするとアニメーションとともに背景色が変化します。動きが軽快なため、クリックした後のタイムラグが少なく、より自分の操作がアニメーションに結びついているということが強く感じられます。
See the Pen Color Changin’ by Alex Zaworski (@alexzaworski) on CodePen.
サンプル
▷軽量・簡単なのにいきいきしたアニメーションが付けられる！anime.jsを触ってみた | それいけ！フロントエンド
▷anime.js
velocity.js
velocity.jsもanime.js同様、軽快なアニメーションが特徴のプラグインです。
anime.jsと同じくらい軽快な動作が可能で、$.animateと互換性があるため使いやすさが魅力です。
複数のアニメーションが組み合わせられたストーリー性のあるものになっています。色々な動きをしていますが、たった1つのプラグインでここまでできてしまうと制作の幅が広がりますね。
See the Pen VelocityJS demo by sora-inu (@sora-inu) on CodePen.
ページを表示したタイミングでこういったアニメーションが表示されると、しっかりしているページだという印象を与えられます。パララックスと組み合わせると、よりアニメーション感を引き立たせることができそうですね。
See the Pen velocity.js animation by Travis (@trhino) on CodePen.
▷Velocity.js
▷アニメーション最強のVelocity.jsの使い方
Transit
Transitは上記のプラグインと比べると動きが少し劣ってしまっていますが、まだまだ使えるプラグインです。ウェブページがしっかりしており、調べごとをする際などにはとてもありがたいですね。
タイポグラフィとアニメーションが組み合わさったものになっています。書かれているテキストは普通のことですが、アニメーションが加わるだけで一気に雑誌の世界観のようなかっこよさが演出されます。
See the Pen Text Effect 2.1 by Andrey Shchekin (@ashmind) on CodePen.
個人的にこういう細かくおしゃれなアニメーションは好きです。マウスオーバーすると文字が反転するという遊び心も楽しくなりますね！
See the Pen Personal Page Preview by Nedim Arabacı (@needim) on CodePen.
▷Transit
▷CSS3アニメーションが簡単に書けるjQuery Transit
まとめ
アニメーションはウェブページのイメージを大きく左右する重要な要素です。アニメーションを入れすぎるのはよくありませんが、適切なタイミングで演出に使用することでユーザーの興味を惹きつけることができます。
実装もアクションと数字を組み合わせればできてしまうものが多く、初心者の人でも比較的手をつけやすいのではないでしょうか。ぜひ一度試してみてください！
