Parazoom

JavaScript

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

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

Parazoom

デモ

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

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

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

Parazoom

関連記事

  1. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  2. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  3. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  4. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  5. Responsive 3d Fold Scroll
  6. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP