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. jQuery Flip-Quote
  2. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  3. Zoom Slider

    JavaScript

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

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

  4. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

  5. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  6. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP