Shuffle Images

JavaScript

画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

Shuffle ImagesというjQueryプラグインを使えば、画像内でマウスカーソルを動かしながら画像をシャッフルすることができます。1つの画像内で様々な画像を見せることができるので、スペースを有効活用したい時なんかにもよさそうですね。普通に画像を表示しているだけじゃ物足りないという方にはオススメです。

[ads_center]

Shuffle Imagesの使い方

以下は実際のデモです。気になる方は、ぜひ試してみて下さい。

Shuffle Images

デモ

使い方もとてもわかりやすいと思います。jQueryとプラグインをhead内で読み込み、HTMLを以下のようにマークアップしていきます。

<div class="shuffle-me">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <!-- ・・・中略・・・ -->
</div>

で、あとはプラグインを呼び出してあげます。

$(".shuffle-me").shuffleImages({
    trigger: "imageMouseMove",
    triggerTarget: false,
    mouseMoveTrigger: 50,
    hoverTrigger: 200,
    scrollTrigger: 100,
    target: "> img"   
});

トリガーにはimageMouseMove以外にも、imageHover、documentMouseMove、documentScroll、imageMouseMoveといったものが用意されています。

Shuffle Images

関連記事

  1. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  2. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  3. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  4. lightgallery.js
  5. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  6. Warp drive jQuery plugin

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP