表示されてから数秒後、浮き出るように画像を表示するのページで説明したように、横幅1500ピクセル以上のディスプレイでこのブログを表示すると鳳凰の画像がふわっと現れる。(フェードインという)仮にこの画像をimg要素としてフェードインさせるのならば、jQueryのfadeInメソッドを使用すれば最も簡単に実装できるだろう。参考URL:jQuery日本語リファレンス・fadeInしかし、実はそのやり方では問題が発生する。今回のようにコンテンツ幅より横幅の大きい画像をimg要素として出現させると、本来は以下の画像のようなコンテンツ幅だったのが、img要素を出現させることによって以下のようにコンテンツ幅が広がってしまう。(未検証だがおそらく)コンテンツ幅が上画像のように広がると、それに応じてブラウザの横スクロールバーが出てしまったりと別の新たな問題が発生してしまうことになる。それを避けるためには、画像をimg要素ではなくCSSの背景画像として表示させることになるだろう。上記のjQueryのfadeInメソッドやanimateメソッドは背景画像だけをフェードインすることができないという点である。その要素ごとフェードインさせることしかできない。いうわけで、今回はCSSの背景画像をフェードインさせる際の問題点とその解決法を解説します。背景画像をフェードインさせるときに発生する問題点CSSの背景画像をフェードインさせる手順のイメージとしては以下のようになります。1、まず、フェードインさせる画像が以下のような画像だとします。2、これを例えばdiv要素などのCSSの背景画像として設定し、3、そのdiv要素を透明度0にしておく。4、そしてdiv要素の透明度をfadeOutメソッドやanimateメソッドによって0から1にすればよい。ここで発生する問題点は、このdiv要素内にコンテンツがある場合、そのコンテンツも上記3の段階で透明になってしまうという点である。今回の目的はあくまでも「背景画像だけをフェードインさせる」というものなので、中にあるコンテンツまでもが透明になってはまずい。解決法の手順としては以下のようになります。1、背景画像を設定したdivをコンテンツとは別レイヤーにして背後に重ねる。2、コンテンツのレイヤーは背景色を設定せず透明にしておき、下のレイヤーは背景画像ごと透明にする。3、そして下のレイヤーだけをfadeInメソッドやanimateメソッドでフェードイン表示させる。このやり方のポイントは、2つのレイヤーを入れ子にしないことである。入れ子にしてしまうと透明度の設定やフェードインの設定が両方に及んでしまうためです。(文末にある追記参照)CSSのpositionプロパティとz-indexを使用して重ねてください。具体的なソースの例では、上記の手順を実現するためのソースの例を書いてみます。1、コンテンツのレイヤーの背景色を透明にする。*/}2、フェードインさせるレイヤーをコンテンツのレイヤーの背後にセット。0;}3、JavaScriptによって下のレイヤーをフェードインさせる。(fadeInメソッドでの例)$('.fade-layer').fadeIn();(参考)fadeInメソッドではなくanimateメソッドの場合は以下のようになる。800);お好きなほうのやり方でどうぞ。上記手順2で「contents-layerと同じ大きさにする」という点で、仮にcontents-layerの横幅や縦幅が可変の場合(コンテンツによって変化する場合)はJavaScriptによってその大きさを取得し、手順2のCSS設定もJavaScript側で行ってしまえば良いでしょう。問題点のところで説明したように入れ子にしないことが前提なので、空っぽである下のレイヤーを上のレイヤーの大きさに合わせられるかがミソになります。!important;としておけば、下のレイヤーを透明にしても問題ないような気がします。コンビニで缶コーヒーを飲みながらタバコを吸うのが日課の暗い人。ご質問やお便りはお問い合わせページからどうぞ。企画もの(使用に注意)全国のうんこ大好きなチビッコ達が大喜び。このボタンの詳しい説明はこちら。一度押すとスタート、もう一度押すとストップ。このボタンの詳しい説明はこちら。