JQuery-SnakeGallery

JavaScript

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

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

JQuery-SnakeGallery

JQuery-SnakeGallery

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

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

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

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

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

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

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

関連記事

  1. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  2. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  3. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  4. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  5. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  6. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP