Drift

JavaScript

画像にホバーして拡大できる軽量のスクリプト「Drift」

Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプトです。商品画像を細部まで見せたいときや拡大画像をすべて載せるスペースがないときなんかに活用できますね。

マウスを動かすと拡大画像もそれに連動し、スムーズに動くのでとても便利です。スペースを有効に使いつつ画像をじっくり見せたい方は要チェックです。

Drift

デモ

灯台の画像にマウスを乗せると右側に拡大画像がヒョコっとアニメーションつきで表示されます。画像内でマウスを動かすことで好きな部分の拡大画像をチェックできます。

マウスが画像の外側に出ると拡大画像も非表示になります。このときもヒョコっと消えるようなアニメーションで非表示になります。

ファイルの容量が軽量なので気軽に実装できるのではないでしょうか?

また、Driftの使い方もシンプルです。オプションもさまざまな項目が用意されているので、デフォルトの値をカスタマイズして実装したい方にも最適です。

ホバー時に画像を拡大できる軽くてシンプルな機能をサイトに取り入れたい方は、ぜひチェックしてみてはいかがでしょうか。

Drift

関連記事

  1. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  2. Responsive Multi Menu
  3. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  4. no-image
  5. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  6. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP