読者です 読者をやめる 読者になる 読者になる

ふろしき.js

Web + Mobile + UX + Performance Tech

1300の優良サイトが選んだ「マウスオーバー・ロールオーバー」ライブラリ集

1300サイト調査 ライブラリ 用語・TIPS Web制作者向け

1300の優良サイトを調査してみたシリーズ、第6回は「マウスオーバー・ロールオーバー」です。

画像やブロック要素などのオブジェクトは、マウスポインタが当たった際にビジュアルデザインが変化することを求められることがあります。これを広義では「マウスオーバ」といい、画像の場合は「ロールオーバ」、ハイパーリンクは「ホバー」と呼び分けをします。

ふろしき.jsの調査では、1300中189サイト(14.53%)にて対策が確認されました。

rollover.js (86件 - 6.46%)

f:id:furoshiki0223:20131022220229p:plain
img要素のロールオーバ処理を実装します。

smartrollover.js (37件 - 2.61%)

f:id:furoshiki0223:20131022220311p:plain

jQuery Opacity Rollover (24件 - 1.84%)

f:id:furoshiki0223:20131022220530p:plain
透明度を利用することで、一枚の画像のみでロールオーバ処理を実現します。

jQuery.rollover.js (13件 - 1.00%)

f:id:furoshiki0223:20131022220405p:plain
jQueryを利用して、img要素のロールオーバ処理を実装します。

smoothrollover.js (11件 - 0.84%)

f:id:furoshiki0223:20131022220622p:plain

jQuery Biggerlink (11件 - 0.84%)

f:id:furoshiki0223:20131022220655p:plain
jQueryを利用して、ブロック要素のマウスオーバ処理を実装します。

rollover2.js (7件 - 0.53%)

f:id:furoshiki0223:20131022220810p:plain
クロスフェードなimg要素のロールオーバ処理を実装します。

最後に

今回も、1300サイトに含まれていた全ての対策方法を紹介してみました。やっていることはシンプルですが、使われているライブラリの種類が非常に豊富なのが特徴ではないでしょうか。

流石に1300サイトを対象にしたので、網羅性は非常に高いと思いますので、悩んだ時は上記のライブラリから自分に合った物を探してみると良いでしょう。

広告を非表示にする