JQuery-SnakeGallery

JavaScript

ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

JQuery-SnakeGalleryは、ホバーした方向へエフェクトが追従してくるアニメーションを実装することができるjQueryプラグインです。画像ギャラリーなどで、たくさんある画像の中からいろいろホバーして詳細を確認したい時なんかに便利ですね。

JQuery-SnakeGallery

JQuery-SnakeGallery

デモページにはたくさんの画像が並べられたギャラリーが設置されており、各画像にホバーすると画像が詳細情報にスライドで切り替わります(オーバーレイされます)。

いろんな画像へホバーするとわかると思いますが、ホバーした方向へ詳細情報の部分がスライド移動しながら追従してきます。

名前にもあるとおり、まるでヘビのようにいろんな方向へついてくるのがおもしろいですね。

詳細情報を表示させる際に、ただ表示させるのではなくちょっとしたアクセントをつけたいといった人には、ピッタリの機能といえるのではないでしょうか?

実際の使い方に関しても、シンプルなマークアップでわかりやすいので手軽に活用できると思います。

そのほか、オプションには、inaccuracy、speedといった項目も用意されています。スピードを調節したいときなどは、オプションから簡単に好みの値を指定することが可能です。

というわけで、画像ギャラリーなどでホバーした方向へ詳細情報がスライド移動しながらついてくるエフェクトを実装できる「JQuery-SnakeGallery」のご紹介でした。

関連記事

  1. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  2. infiniteSlider2.js
  3. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  4. Circular Slider
  5. Multi-device scrolling menu
  6. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

最近の記事

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

アーカイブ

PAGE TOP