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

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

サイトのキャプチャ

Adipoli

Adipoliのデモ

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

デモのキャプチャ

デモ

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

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

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

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

デモのキャプチャ

デフォルト: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'
}); 

top of page

©2017 coliss