THE HAM MEDIA BLOG

jQueryで背景画像と透明度を利用したフワッとしたロールオーバー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
ロールオーバー
rollover

jQueryで背景画像と透明度を利用したフワッとしたロールオーバー

いつもロールオーバーを設定するときは、
パッとすぐに切り替わるものを使っていたのですが、
以前紹介した、「透明度を利用したロールオーバー
これを使えばフワッとしたロールオーバーができな〜
なんて思ったのでさっそく作ってみた。



フェードを利用

サンプルロールオーバー

作りは単純で、以前紹介した透明度のロールオーバーを使う場所に、
背景画像を設定しておくだけ。

あとは透明度で0を指定しておけば
ロールオーバー時に背景画像に切り替わる仕組み。

使うときのポイント

ポイントはフェードするのがimgのみで、
背景を設定しておくのはその周りを囲うaやpに設定しておく。
ちなみに今回はpに設定しておいてある。

単に透明度を利用するだけのもいいけど、
この方法だとふわっとさせるだけでなく、
色の変化も簡単につけることができるので、
単にロールオーバーをするよりも、今回のように、
フェード機能をつけるのもいいかもしれない。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。