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. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  2. CSS3 Menu Slider
  3. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  4. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  5. Jquery modal box plugin
  6. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP