Parazoom

JavaScript

クールに拡大・チルトする画像ズーム「Parazoom」

Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるjQueryプラグインです。画像にマウスオーバーすることで簡単に拡大できるほか、マウスを動かすことでその位置に合わせて画像がチルトするのもカッコイイですね。

Parazoom

デモ

デモではライオンの画像表示されていて、ここにマウスオーバーすることで画像が拡大されます。また、画像内でマウスを動かすと、その動きに連動して画像がチルトします。例えば、左側にマウスを持っていくと画像の左側が奥に引っ込み、右側が手前にきます。逆に今度は右側にマウスを持って行くと、先ほどとは逆の動きになります。

たた単に画像が拡大されるだけではなく、このようにインタラクティブな要素があることでユーザーも楽しめそうですね。

ちなみに、チルトエフェクトはオプションのtiltから有効・無効どちらにも設定することができます。デフォルトはfalseに指定されています。オプションには他にも、scale、transitionTime、transitionTimeLeave、opacity、opacityHover、overflow、cursor、customCursorIcon、custonCursorSize、text……など、たくさんの項目が用意されています。

Parazoom

関連記事

  1. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  2. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  3. jquery.horizonScroll.js
  4. Playful Little Tooltip Ideas
  5. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  6. HR Navigation Responsive Menu

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城
  5. ハードサイド CS80

Instagram始めました

Facebookページ

PAGE TOP