Parazoom

JavaScript

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

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

Parazoom

デモ

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

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

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

Parazoom

Priority Nav Scroller水平スクロールができるナビゲーション「Priority Nav Scroller」前のページ

テキストを徐々にハイライトしていく「LuminJS」次のページLuminJS

関連記事

  1. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  2. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  3. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  4. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

  5. normalmap.js

    JavaScript

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

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

  6. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP