JQuery-SnakeGallery

JavaScript

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

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

JQuery-SnakeGallery

JQuery-SnakeGallery

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

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

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

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

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

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

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

関連記事

  1. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  2. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  3. gridscrolling.js
  4. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  5. AJAX Live Search

最近の記事

  1. Hermèsオレンジスポーツバンド
  2. GoPro HERO8 Black
  3. 16インチMacBook Pro

アーカイブ

PAGE TOP