Parazoom

JavaScript

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

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

Parazoom

デモ

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

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

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

Parazoom

関連記事

  1. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  2. jQuery Star Flashing Effect
  3. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  4. DD Scroll Boxes
  5. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  6. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP