日本語ドメインサイトのTOPページにちょいと加工施しました。
今までは、TOPページ読み込み毎にイメージ画像をランダムに表示してましたが、今回の加工で5種類の画像をフェードイン・フェードアウトに変更。
使ったツールはjQueryとjQueryライブラリのプラグインInnerFadeです。
Flashを使えば何てことはなく簡単に出来る事だけど、アンチFlashとしてはどうても自社サイトにFlashを使いたくなかったのさ。
そうそう、単に画像がフェードイン・フェードアウトでは面白くなかったので、画像毎にリンク先を設定できるようにしています。
Flashを使わずにフェードインフェードアウトが、どんな感じかはこちらをご覧ください。
自分用に記録しておきます。
フェードイン・フェードアウトの方法。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript"><!--
$(function(){
$("#div名記入").innerfade();
});
// --></script>
黄色のマーカー箇所に、フェードインフェードアウトしたい画像のエリアをdiv~/divで指定したdiv名を入れます。
※注意
- div名を指定しなければ、どの部分をフェードインフェードアウトして良いのかわからないのでフェードインフェードアウトが出来ない。
- javascript指定するときは、jquery.jsの後にjquery.innerfade.jsを入れる。
デフォルトではスピードが速いと思ったので、
<script type="text/javascript"><!--
$(function(){
$("#div名記入").innerfade();
});
// --></script>
を
<script type="text/javascript"><!--
$(function(){
$("#div名記入").innerfade({
animationtype: 'fade',
speed: 2500,
type: 'sequence',
timeout: 4000,
containerheight : 300
});
});
// --></script>
に変更しています。
| animationtype | アニメーションの種類(fade、slide) |
|---|---|
| speed | フェードにかかる時間(ミリ秒、slow、fast、normal) |
| timeout | フェードするまでの時間(ミリ秒) |
| type | 種類(sequenceまたはrandom) |
| containerheight | 表示領域の高さ(デフォルトでは自動) |
| runningclass | フェード領域のスタイルシート(デフォルトではinnerfade) |
ただ、問題点もあります。
それはオイラのサイトの場合は、半透明のプルダウンメニューも入れているのでSafari・Firefoxではプルダウンメニューがフェードインフェードアウト画像の裏に回ってしまいます。
たぶん、プルダウンメニュー箇所のCSSでZインデックスを変更してやれば問題はないと思うけど、仕事サイトを見にきてくれる方（お客さん：お客さん予備軍）はIEが限りなく100％に近いので、次回に・・・。そろそろ眠たくなってきた。
Firefox・Safariは知人か同業者ばかりだから、ご理解を～。
コメントする