Drift

JavaScript

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

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

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

Drift

デモ

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

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

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

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

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

Drift

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

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

関連記事

  1. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  2. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  3. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  4. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  5. Simply Modal Box
  6. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP