jQueryで背景画像と透明度を利用したフワッとしたロールオーバー
いつもロールオーバーを設定するときは、
パッとすぐに切り替わるものを使っていたのですが、
以前紹介した、「透明度を利用したロールオーバー」
これを使えばフワッとしたロールオーバーができな〜
なんて思ったのでさっそく作ってみた。
フェードを利用
作りは単純で、以前紹介した透明度のロールオーバーを使う場所に、
背景画像を設定しておくだけ。
あとは透明度で０を指定しておけば
ロールオーバー時に背景画像に切り替わる仕組み。
使うときのポイント
ポイントはフェードするのがimgのみで、
背景を設定しておくのはその周りを囲うaやpに設定しておく。
ちなみに今回はpに設定しておいてある。
単に透明度を利用するだけのもいいけど、
この方法だとふわっとさせるだけでなく、
色の変化も簡単につけることができるので、
単にロールオーバーをするよりも、今回のように、
フェード機能をつけるのもいいかもしれない。
