2011年5月アーカイブ

2011年5月28日

スライドショーも工夫次第

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

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

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

参考サイト → CrossSlide

2011年5月21日

フェードインをもっと効果的に!

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

使用サンプル → fade

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

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

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

参考サイト → skuare.net

2011年5月14日

これはフルFLASHサイト? No2

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

使用サンプル → maximage

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

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

参考サイト → DAICHIFIVE

2011年5月 7日

これはフルFLASHサイト?

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

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

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

OpenID対応しています OpenIDについて

このアーカイブについて

このページには、2011年5月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2010年3月です。

次のアーカイブは2011年6月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。