簡単にアニメーションを実装するライブラリ3選+α

当ページのリンクには広告が含まれています。

LPなどのPR重視のページではまだまだ有効な視覚効果が得られるのが「アニメーション」。最近はWordpressのテーマでデフォルトで組み込まれているものもあるので自分で実装する機会も少ないかもしれませんが目を引くポイントとなるので、ライブラリをいくつかピックアップ。

目次

簡単にサイトにアニメーションを入れる

テキストを動かす(animate.css)

CSSファイルのダウンロード

https://github.com/animate-css/animate.css?files=1

公式サイトとデモ

https://animate.style/

マウスオーバーで動かす(hover.css)

CSSファイルのダウンロード

https://github.com/IanLunn/Hover

公式サイトとデモ

https://ianlunn.github.io/Hover/

画像をマウスオーバーで動かす(imagehover.css)

エフェクトの種類で無料と有料版があるのでご注意ください。ここでは無料版で説明してます。

CSSファイルのダウンロード

https://github.com/ciar4n/imagehover.css/archive/master.zip

公式サイトとデモ

https://www.imagehover.io/

その他のアニメーション

他にもいくつかアニメーションのライブラリもありますので、希望の動きを探してみてください。

https://elrumordelaluz.github.io/csshake/

https://www.minimamente.com/project/magic/

http://cssanimation.io/

最後に…

WEBサイトのページレイアウトでは、ヘッダーからスクロールしていき、最後のフッターに行くまで読み飽きない為の「リズム」が必要です。画像やテキストの位置、色もそうですが、アクセントで動きを入れるのも効果的。CSSのライブラリの他にもJavascriptのものもあるので、簡単にハイクオリティな表現ができます。
ただし、入れすぎるとファイルの読み込みに時間が掛かったりして、表示速度に影響がでますのでご注意を。

楽天市場で注目の商品![ sponsored ]

  • URLをコピーしました!
目次