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. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

  2. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  3. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  4. Lena.js

    JavaScript

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

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

  5. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  6. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP