JQuery-SnakeGallery

JavaScript

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

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

JQuery-SnakeGallery

JQuery-SnakeGallery

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

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

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

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

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

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

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

jQuery Floating Social Shareカウンター付きのソーシャルシェアボタンを実装できる「jQuery Floating Social Share」前のページ

シンプルな操作性でカスタマイズ性にも優れたスライダー実装「infiniteSlider2.js」次のページinfiniteSlider2.js

関連記事

  1. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  2. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  3. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  4. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  5. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  6. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP