コラム

今回はWEBサイトに簡単に実装できるアニメーションのプラグインやライブラリについて紹介します。
WEBサイトにおいてアニメーションはほぼ不可欠の要素となっています。
ローディング画面やスライドショーなど少しの動きを加えるだけでユーザの目を引くことができます。

Animate.css

公式サイト・デモページ

Animate.cssは外部CSSを読み込ませ、動かしたい要素にクラス名をつけるだけで実装できるCSSライブラリです。
一部のアニメーションにはjQueryが必要になりますが動きも豊富で実装も簡単なためおすすめです。

Wait!Animate

公式サイト・デモページ

Wait AnimateはWEBサイト上でアニメーションを生成することのできるサービスです。
動きを確認しながら生成でき、CSSにコピーして要素にクラス名を付けるだけなので新しくCSSやJSを読み込む必要もありません。

Magic Animations

公式サイト・デモページ

Magic AnimationsはAnimate.cssと似たような使い方ができるらぶらりです。jQueryが必要になりますがCSSファイルを読み込むだけで導入できます。
アニメーション自体はMagicだけで動作できますが、jQueyと組み合わせて要素のクリックやホバーを引き金にしてアニメーションさせることができます。

AOS(Animation On Scroll)

公式サイト・デモページ

AOSはスクロールで要素が表示されるときにアニメーションさせることができるプラグインです。
基本的な動きは「Fade」、「Flip」、「Zoom」の3種類ですが、タイミングや速度・アニメーションの方向など多くのカスタマイズができます。
AOS導入自体にはjQueryが不要で要素にカスタム属性を付与するだけで実装できます。

Hover.css

公式サイト・デモページ

Hover.cssは簡単にホバーアクションが利用できるようになるCSSライブラリです。
種類が豊富で100種以上のアニメーションがクラス名を付与するだけで手軽に扱えます。

まとめ

今回紹介させていただいたプラグイン・ライブラリは実装も簡単なので
使いすぎには注意して導入してみてはいかがでしょうか？