Animated Responsive Image Grid

画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。

レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。

サンプルを見て頂くとわかりやすいと思います。

→　タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその１

→　タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその２

オプションを変更することで、多彩なエフェクト効果が可能になっています。

---

【使用方法】
まずはこちらのAnimated Responsive Image Gridのサイトからソースを一式ダウンロードします。

head部分にcssを記述します。

次にbody部分の最後にJavaScriptを記述して、準備完了です。

ギャラリーを表示させたいところに次のように記述して完成です。

オプションを設定することで、さらに色々な表現をすることができます。ざっと説明します。

// たての画像数
rows : 4,

// 横の画像数
columns : 10,

// 次のように設定するとウィンドウズサイズに合わせて縦横の画像数を設定出来ます。
w1024 : {
rows : 3,
columns : 8
},

w768 : {
rows : 3,
columns : 7
},

w480 : {
rows : 3,
columns : 5
},

w320 : {
rows : 2,
columns : 4
},

w240 : {
rows : 2,
columns : 3
},

// 同時に何枚の画像を切り替えるかの設定ができます。
// random || [some number]
// note: 数字で設定するときは、maxStep（最大数）より大きな数は設定しない。
step : ‘random’,
maxStep : 3,

// 画像をクリックできないようにする
preventClick : true,

// アニメーション（画像切替時のエフェクト）タイプを設定出来ます。
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType : ‘random’,

// アニメーションスピード
animSpeed : 500,

// animation easings
animEasingOut : ‘linear’,
animEasingIn : ‘linear’,

// ３秒毎に切り替える設定方法。
// note: パフォーマンスの問題のために 300 ms以内で設定すること
interval : 3000,
// slideshow: falseに設定するとスライドが始まりません。
// これはonhover をtrueにするときに使用して下さい。
slideshow : true,
// onhover: 画像にマウスオーバーするときに画像を切り替える。
onhover : false,
// 変えるべきではない要素
nochange : []

オプションやスタイルを変更して、例えば本家のデモのようにフルスクリーンいっぱいに画像を並べて背景にすることもできます。
Demo 3: Random animations / 100% container width / max. 2 images switch at a time / 2s between switching

色々な使い方ができると思いますので、シーンに合わせて導入してみてはいかがでしょうか。

最後にサンプルのソースを書いておきます。どうぞご参考まで。
サンプルその１

サンプルその２

あわせてお読みください

ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」

Backstretch 以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家の…



テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」

テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。 テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すこと…



Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」

最近、特に女性に人気があるPinterest（ピンタレスト）。 その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。 Pinterest（ピンタレ…