コラム

今回は前回に続いてアニメーションプラグイン・ライブラリについてご紹介します。

Animisition

公式サイト・デモページ

ブランディングサイトなどでページ移動時などでアニメーションを追加することのできるjQueryプラグインです。
アニメーションの種類やオプションが豊富でカスタムもできるので少し複雑な処理まで行うことができます。

ScrollMe

公式サイト・デモページ

WEBページにスクロールエフェクトを加えることのできるjQueryプラグインです。
jQuery本体とスクリプトファイルを読み込み、カスタムデータ属性をHTML要素に記述するだけなので簡単に実装で簡単に実装できます。
アニメーションは「拡大・縮小」、「回転」、「移動」、「透過」があります。

DrawSVG

公式サイト・デモページ

DrawSVGはSVG画像のパスを手軽にアニメーションさせることのできるプラグインです。
SVG画像をimgタグで読み込むのではなく、SVGコードをHTMLに記述する必要があるため注意が必要です。
トップページやローディングアニメーションに使用できるとサイトのクオリティが高まると思うので1度は使ってみたいプラグインです。

Velocity

公式サイト・デモページ

jQueryの$.animate()と互換性があり、より軽快なアニメーションができるjQueryプラグインです。
記述方法も$.animate()と似ているのでJSの使い方に慣れた人ならすぐに使えると思います。
動作面、オプション面では$.animate()より優れているので、これからアニメーションを導入するならおすすめです。

anime.js

公式サイト・デモページ

anime.jsはVelocityとにたようなjQueryプラグインですが、Velocityよりも記述が簡単でファイル容量が軽量です。
ｊQueryの$.animate()とは互換性がありませんが、初心者・容量の多いサイトにはこちらがおすすめです。

まとめ

今回は、前回ご紹介したものより少し記述や設定が複雑なものをご紹介しました。
どのプラグインも1度は使って損はないと思いますので導入を考えてみてはいかがでしょうか？