秀逸なホバーアニメーションプラグイン「iHover」

2014.08.17

国内ホームページにもエフェクトを設置した楽しいデザインがあります。
わたしが数あるCss Hoverエフェクトプラグインの中で、これは秀逸だと思ったものをご紹介!
 

CSS3でつくられており、計20パターンのエフェクトが用意されています。
実装も超簡単!
 

ただ、スマホで動くっちゃ動きますが、
クリックじゃないとダメなのとタイムラグがあるので、
実装される方は事前チェックしておいたほうが良いかと・・・。
 

iHover

liruu01
URL & DEMO:
http://gudh.github.io/ihover/dist/index.html
 

全エフェクトのデモとソースが掲載されています。
liruu02
基本的なエフェクトに加え、
懐中時計とかを開く動きとか、
両開き冷蔵庫みたいなのとか、
サムネイルになったりとバラエティ豊かなエフェクト集です。
 

Bootstrap3もOKみたいですねっっ。
GitHubでDL後、CSS設置して任意のソースをコピペで実装。

ホバーエフェクト 使い方

1.まず、DL
下記からダウンロードします。
DOWNLOAD:
https://github.com/gudh/ihover
liruu04
フォルダ展開すると、上記が同梱されています。
「dist」にはDEMOページがそのまま入っています。

 

2.CSS設置
「src」フォルダ内にある ihover.css か min.css のどちらかを導入したいページに設置します。


<link rel="stylesheet" href="ihover.css">

 

使いたいエフェクトの画像を準備し、
DEMOページにある任意のソースをコピペするだけでOKです。
※パスは任意に設定してください。

わずか2ステップで実装!
超簡単です!!
但し・・・・・
IEはタイムラグがあるので注意してください。
Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact