ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Adipoliはマウスオーバーで画像に表示イフェクトを加えるJavaScriptライブラリです。

jQueryを使って、マウスオーバー時に画像にイフェクトを加えられるのがAdipoliです。ギャラリーや機能の紹介などで使うとインパクトがありそうです。


何もしていない時の表示。下の方の画像は色々問題がありそうなのでぼかしています。


マウスオーバー。白黒だった画像に色がつきました(実際には逆だと思いますが)。


こちらはマウスオーバーで拡大表示します。

掲載すると問題がありそうな画像が多いのが残念ですが、Adipoliではその他20種類を越えるイフェクトが実現できます。スライドダウン、ボックスなど様々な効果を使うことで画像を効果的にアピールできそうです。

AdipoliはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Webサイトにおいてテキストコンテンツだけよりも画像を載せた方がインパクトが強いのは確かですが、あまり乱立させるとインパクトが薄れるばかりか、焦点がぼやけてしまってユーザを混乱させる原因にもなります。

Adipoliを使ってデフォルトの画像を白黒や目立たないようにしつつ、マウスオーバーでインパクトを付けるという手法はありかも知れません。表示方法はもちろん、その見せ方についても特徴を持たせるのは面白いのではないでしょうか。

Adipoli jQuery Image Hover Effects

 

MOONGIFTの関連記事

  • DevRel
  • Com2