マウスホバー時のエフェクトが数多くまとめられた［Hover.css］を紹介します。
導入方法は非常に簡単で、配布されているCSSのファイルを読み込み、エフェクト処理を施したい箇所に任意のclassを指定するだけです。
公式版のデモサイトも公開されていますが、本当に簡単に実装できてしますのでサンプルサイトを用意しました。
以下より実際の挙動を確認することができます。
［Hover.css］の使い方
まずは公式サイトからファイル一式を入手します。
ダウンロードしたzipファイルを解凍すると複数のデータが展開されますが、基本的に、使用するのは「hover.css」または「hover-min.css」のみ。これをHTMLの <head>〜</head> 内で読み込みます。
<head> <link rel="stylesheet" href="css/hover-min.css"> </head>
仮に、一部のエフェクトだけを使用したい場合は該当するコードをコピペしてしまえばOKです。……といっても、大抵はこのケースかと思います。
さて。準備はこれで終了。あとはエフェクト処理を施したい箇所に任意のclass名を指定するだけです。
<a href="#" class="hvr-trim">Trim</a>
なお「SASS」と「LESS」にも対応しており、より簡単・便利に実装することが可能です。
ファイルのダウンロードは以下よりどうぞ。
ウェブサイトでお困りのときはオンズにお任せください！
