【CSS】オシャレなアニメーションの実装【ihover】

CSSでアニメーションの勉強をしてて
「アニメーションのライブラリみたいなのってないのかな」
とふと思いました。

調べてみるとやっぱりあるんですよ。
それもたくさん。

今回は見つけたうちの一つ、ihoverについて紹介していきます。

 

ihoverを使って何ができる?

デモページがあるのでそちらを見れば一目瞭然です。
http://gudh.github.io/ihover/dist/index.html

リンク先はGithubというアメリカの企業が運営しているウェブサービスです。

当然英語ですがそこまで気になりません。

リンク先のHover effect 1という丸い写真にカーソルをのせると
アニメーションします。

つまりこういう丸いエフェクトを作れます。

 

ihoverはどうやって使える?

ihoverの正体はcssファイルなのでcssファイルをダウンロードします。

これまたGitHubからダウンロードできます。
https://github.com/gudh/ihover

「Clone or download」から「Download ZIP」でダウンロードできます。

回答したファイルのsrcフォルダにihover.cssが入っています。

これを実装したい自分のプロジェクトのcssファイルに突っ込めば準備完了。

 

ソースコード

まずはheadタグの中に下記を記載して読み込む。
アドレスパスは人それぞれ。
<link rel="stylesheet" href="css/ihover.css">

そしてデモページの
Hover effect 1の下にあるコードをすべてコピーして
bodyタグの中に張り付けます。

あとは画像のリンクを変えるだけ。

 

実装例

エフェクト17を使ってみましたので
スクリーンショット。

まとめ

かっこいいです。とにかくかっこいい。

結構簡単に使えるのでよかったらどうぞ。