HPで使えるanimation紹介

ホームページのコーディングをしている際に、要素に様々なエフェクトをつけることがあります。
ただ今までやったことがないエフェクトを一から導入すると大変時間がかかることがあります。
そこで今回は各種エフェクトをソース込みで公開しているサイトを紹介したいと思います。

■freefrontend
https://freefrontend.com/

・25 CSS Hover Effects
https://freefrontend.com/css-hover-effects/

ホバーエフェクトを25個コレクションしているサイトです。
リンクにある「demo and code」からデモサイトと必要なコードを見ることができます。

■Animate.css
https://daneden.github.io/animate.css/

Animate.cssはもっともポピュラーな CSS アニメーションライブラリです。
見たいエフェクトを選択し「Animate it」を押すと動きを見ることができます。
必要なソースは「Download Animate.css」より確認できます。
特定のアニメーションにはjQueryが必要な場合があるのでご注意ください。
コーディングを外注する時に、細かな動きを指定する場合は「このサイトのこの動きでお願いします。」と指定する際に重宝しています。

■Bounce.js
http://bouncejs.com/

Bounce.jsは CSS 3のアニメーションをベースに可愛らしい動きを操作するために作られた JavaScript のライブラリです。「Export CSS」選んだコードを確認することができます。

■AOS
https://michalsnik.github.io/aos/

AOSはAnimate On Scrollの略で、スクロールイベントでアニメーションを呼び出すことができるCSSとJavaScriptのライブラリです。
スクロールダウンしてアニメーションを開始したあとでも、スクロールを戻すとプレイバックすることができます。
右上のキャラクターアイコンより使用しているデータを確認できます。

■Magic Animations
https://www.minimamente.com/example/magic_animations/

Magic Animationsは、Power Pointで見たことがあるような出現・消失のアニメーションを実装することができるライブラリです。
jQueryを必要としますが、CSSファイルを読み込むだけで準備完了です。
「DOWNLOAD from GitHub」より必要なソースを確認することができます。

■Hover.css
http://ianlunn.github.io/Hover/

HoverCSSはその名の通りホバー(マウスオーバー)で動くアニメーションを実装するための CSS アニメーションライブラリです。
ボタンや他の UI 要素に簡単にアニメーションを実装することができます。
「DOWNLOAD on GitHub」より必要なソースを確認することができます。

■SANKOU!
https://sankoudesign.com/

・ホバー
https://sankoudesign.com/category/hover/
こちらはソースを紹介するページデジはなく、ホバー効果を利用したおしゃれなサイトの紹介ページです。
デザインにも参考になるサイトが多数登録されています。

以上、ホームページにアニメーションを実装するライブラリ＆プラグイン、また参考になるサイトをご紹介しました。
ホームページの完成度をより高めるために、参考にしてみてください。