Drift

JavaScript

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

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

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

Drift

デモ

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

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

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

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

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

Drift

関連記事

  1. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  2. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  3. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

  4. no-image
  5. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  6. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP