ホームページ制作に役立つ!ブレイン・エイチシー

ホームページ制作の備忘録サイト(SEO / CSS / Javascript / Ajax / PHP / MySQL / WordPress / MovableType / etc…)

【Javascript】 ブロック要素の表示効果(フェードイン・フェードアウト)

Posted by Yamana 12月 - 16 - 2010 - 木曜日 コメントは受け付けていません。
 

画像のフェードイン&フェードアウトはよく見かけるが
ブロック要素にこの効果をかけたいとき、どうすればと思っていると。

ネット上に無いものはないのでしょうか?
やっぱりありました。

写真つきの記事などの塊(ブロック要素)ごとフェード効果。

非常に助かりました。

組み込みは簡単。
headタグ内でまずスクリプトを読み込む。

そして、bodyタグの最後あたりに
var cf = new Crossfader( new Array(‘cf1′,’cf2′,’cf3′), 500, 2000 );
のスクリプトを実行するだけ。
※ここでの「cf1」や「cf2」というのがブロック要素のID名。

Javascriptのソースはこちらから

http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html