[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli

シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。

Adipoli

[ad#ad-2]

• Adipoliのデモ
• Adipoliの使い方

Adipoliのデモ

デモでは画像をホバーすると、その列で目立つようにエフェクトが適用されます。

デモ

用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。

• normal
• popout
• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpRandom
• sliceUpDown
• sliceUpDownLeft
• fold
• foldLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。

[ad#ad-2]

以下、デモページのエフェクトを紹介します。

デフォルト：normal、ホバー：popout

デフォルト：overlay、ホバー：sliceDown

デフォルト：transparent、ホバー：boxRandom

デフォルト：overlay、ホバー：foldLeft

デフォルト：transparent、ホバー：boxRainGrowReverse

Adipoliの使い方

外部ファイル

当スタイルシートと「jquery.js」と当スクリプトを外部ファイルとして記述します。

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script> 

JavaScript

jQueryのセレクタで適用する画像を指定します。

<script>
      $('#image1').adipoli();
</script>

スクリプトのオプション

スクリプトのオプションでは、デフォルト時のエフェクト、ホバー時のエフェクト、アニメーションの時間などが設定できます。
オプションを使用すると、下記のようになります。

$('#image1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});