Drift

JavaScript

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

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

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

Drift

デモ

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

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

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

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

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

Drift

Finderのデフォルトフォルダを変更MacのFinderで最初に開かれる(新規ウインドウ)デフォルトフォルダを変更する設定方法前のページ

Macで「/(スラッシュ)」を「・(中黒)」に変更する設定方法次のページ「/(スラッシュ)」を「・(中黒)」に変更

関連記事

  1. no-image
  2. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  3. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  4. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  5. no-image

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP