JQuery-SnakeGallery

JavaScript

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

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

JQuery-SnakeGallery

JQuery-SnakeGallery

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

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

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

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

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

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

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

関連記事

  1. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  2. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  3. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

  4. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  5. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  6. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP