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

水平・垂直に引く段階フィルターLightroomの段階フィルターで水平・垂直に線を引く方法前のページ

スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」次のページcrossfade.js

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP