2011年5月アーカイブ

カルーセルパネルのように、同じサイズの写真を横スライドや縦スライドを使って、
効果的に見せる方法はいくつも工夫されています。
そのなかで、スライドショーにフェード、スライド、ズーム、イージングの効果を簡単につけられる
CrossSlideプラグインがあります。

最もシンプルに　→　フェード　
少し工夫して　→　スライド＋フェード
FLASHのように　→　ズーム＋イージング

使い方は参考サイトからプラグインをダウンロードして、
jQuery、CrossSlideプラグインを読み込み、
画像を表示させるid要素を引数として渡すだけです。
スライドショーとして切り替えているタイミングを変更するには、
引数のsleepを、切り替えるときのじんわり感を変えるにはfadeを変えるだけです。
また、イージング効果を使うには、jQuery Easing Pluginも必要です。

参考サイト　→　CrossSlide

単純に写真を並べるだけでなく、ページ読み込み時にフェードイン効果を使って
印象的になる表示方法を使ってみましょう。
すべてが同じタイミングでフェードインするだけでは味気ないため、
一枚ずつ時間差でフェードインするようにひと工夫します。

使用サンプル　→　fade

使用実例　→　フォトグラファー 木村 隆宏

このわずかな時間差で効果が現れることにどのくらいのユーザーが気がつくだろう？

PNGファイルを使うときは、IEに対して要注意ですが、
GIF、JPEGはブラウザ共通の効果が得られます。

参考サイト　→　skuare.net

前回、背景画像をブラウザ全体に敷き詰める方法を紹介しましたが、
今回は、複数の画像をフェード効果を付けて切り替える方法です。

使用サンプル　→　maximage

背景の与えるインパクトも大きく、
本体コンテンツは独立しているため、
背景に設置する画像を工夫すれば効果的なWEBになります。

使い方はjQueryからプラグイン「maxImage Image Scaling」をダウンロードして、
プラグインを読み込み、背景に指定したい画像へ
クラス名「bgimage」を付けるだけです。
スライドショーとして切り替えているタイミングを変更するには、
引数のslideDelayを変えるだけです。

参考サイト　→　DAICHIFIVE

ブラウザ全体に画像を敷き詰め、
ブラウザのサイズを変更するたびに背景画像もリサイズされるサイトは、
FLASHサイトによく見かけます。
しかしこれはjQueryで実現しています。

jmc_resizrにはそれぞれ特徴の異なる５つのモードがあります。
fit　→　背景が縦長　背景が横長
height　→　背景が縦長　背景が横長
width　→　背景が縦長　背景が横長
fill_outer　→　背景が縦長　背景が横長
full　→　背景が縦長　背景が横長

全体に画像が敷き詰められるため、文字を配置するには読みやすくなるよう配慮が必要ですが、
FLASHを使わずにインパクトを与えられる方法です。