Animated Responsive Image Grid

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

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

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

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

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

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


【使用方法】
まずはこちらの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’,

// 3秒毎に切り替える設定方法。
// 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

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

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

サンプルその2

この記事と関連してると思われる記事: