HOME > >

jQuery adipoli

画像にマウスオーバーした際に様々なアニメーションエフェクトを実行するjQueryのプラグイン。

使い方

jQuery本体とadipoli.js、adipoli.cssが必要となります。

HTML

  1.  
  2. <link href="adipoli.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script type="text/javascript" src="jquery.min.js"></script>
  5. <script type="text/javascript" src="jquery.adipoli.min.js"></script>
  6.  

サンプル

画像に対してadipoli()を実行するだけです。必要に応じてオプションを設定します。

実行結果

Javascript

  1. $(function(){
  2.     $('#adipoli img').adipoli();
  3. });

HTML

  1. <div id="adipoli">
  2.     <img src="/resource/images/photos/1.jpg" alt="">
  3.     <img src="/resource/images/photos/2.jpg" alt="">
  4.     <img src="/resource/images/photos/3.jpg" alt="">
  5. </div>

気がついた点としては、実際の画像サイズと表示サイズが異なると上手くいきませんでした。 100px * 100pxの画像をCSSで200px * 200px に拡大して表示してる場合など。

デモ

パラメーター変更後、再設定ボタンを押すと設定が反映されます。

startEffect
hoverEffect
imageOpacity
animSpeed
fillColor
textColor
overlayText
slices
boxCols
boxRows
popOutMargin
popOutShadow

オプション

key 意味 default 選択可能な値
startEffect 初期状態 transparent
  • transparent
  • normal
  • overlay
  • grayscale
hoverEffect マウスオーバー時のエフェクト normal
  • normal
  • popout
  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpRandom
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • foldLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse
imageOpacity 初期状態でtransparent か overlayを選択したときの透明度 0.5 0~1
animSpeed マウスオーバー時のエフェクトの速度 300 int
fillColor Overlay color #000 #000000~#FFFFFF
textColor overlayTextを設定した場合のテキストカラー #fff #000000~#FFFFFF
overlayText イメージ上に表示するテキスト。startEffectでoverrayを選択したときだけ有効 string
slices スライスの数。hoverEffectでslice系のエフェクトを選択した場合に適用される。 10 int
boxCols ボックスの列の数。hoverEffectでbox系のエフェクトを選択した場合に適用される。 5 int
boxRows ボックスの行の数。hoverEffectでbox系のエフェクトを選択した場合に適用される。 3 int
popOutMargin popout時のマージン。hoverEffectにpopoutを選択した場合に利用。 10 int
popOutShadow popout時の影。 10 int