ZooMove

JavaScript

マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

ZooMoveは、マウスオーバーで指定された画像やエリアをズームすることができるjQueryプラグインです。これまでも、このような挙動を実装するプラグインは数多く紹介されてきましたが、マウスクリックにより発生するものでした。ところが、ZooMoveを使用すれば、マウスオーバーするだけで同じ挙動を発生させることができます。カーソルを動かせば、見たいポイントを移動させることも可能です。最近では、オンラインショップの商品画像ページで多く見られる表現ですね。それでは、詳しく紹介してみたいと思います。

ZooMove

デモ

ZooMoveは「画像全体の拡大よりも、画像の一部を拡大で見たい場合」に使用すると効果を実感できると思います。冒頭で述べたような商品画像にはもちろん、人が写っている写真でも、とくに大勢で写っている写真にはピッタリです! ZooMoveを使用すれば、一人ひとりの表情まで確認ができて、思い出の一枚がより鮮明によみがえりそうですね。

また、もともとの表示領域を変えずに確認したいところのみが拡大されます。画像全体の拡大によって、ページ内でほかのコンテンツが隠れてしまう心配がありません。

使い方ですが、デモページに丁寧に記載されています。基本的には、NPMでZooMoveのインストール、CSS・jQuery・jsの読み込みを行い、「figure class」で画像データをマークアップし、さらにjsでその画像の拡大に関する詳細を指定するというシンプルな流れとなります。

  • マウスオーバーした部分の150%拡大(デフォルト値)
  • マウスオーバーした部分の300%拡大
  • マウスオーバーした画像の全体を拡大させるもの

デフォルトの150%は少しもの足りなさを感じたので、通常なら200%くらいがいいかもしれません。

その他のオプションには、マウスの移動とともに画像も移動させるかどうか(デフォルトはtrue)、カーソルについてカーソルポインタまたはデフォルトを使用するか(デフォルトはfalse)などの指定が可能です。

ブラウザの互換性は、Chrome 42+、Firefox 41+、Safari 9+、Opera 29+、IE 9+に対応しているとのことですが、最近話題のVivaldiで確認したところ、こちらも対応していました。

ZooMove

関連記事

  1. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  2. Accessible Mega Menu
  3. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  4. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  5. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  6. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP