Drift

JavaScript

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

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

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

Drift

デモ

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

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

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

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

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

Drift

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

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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  2. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  3. jQuery Flip-Quote
  4. lightgallery.js
  5. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  6. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP