jQueryで背景画像がクロスフェードするやつ

Pocket
[`evernote` not found]

背景画像がクロスフェードするの

Advent Calendar in 信州松本(だけじゃなくてもいいよ)20日目、担当4_1です。
昨日のToro_Unitさんの投稿、僕は、普段独自のCMSを使っているので、wordpressの可能性を感じて大変参考になりました。このブログもwordpressでつくってあるんですけどね。「ブログ」の域をを越えて、CMSとしてもwordpress使ってみたくなりました。

さて、今日のネタは、少しかぶってしまいますが、jqueryで背景画像をクロスフェードさせるのです。よくわからない説明ですが、こんな感じです。

DEMO

作ったと言ってもクロスフェードの部分はWeb Designing: 2012年12月号に掲載されていたサンプルを参考にしています。
今回のデモですと、画像ではなく背景画像を指定したdivをクロスフェードさせています。

背景画像なので当然、widthとheightを指定しないと画像は表示されません。
heightは画像の高さを指定すればいいです。
ではwidthは?
画像のサイズを指定してしまうと、実際のコンテンツサイズよりも大きくなってしまう可能性があります。(コンテンツエリアよりも広いスペースでのクロスフェードを想定してます)
その場合、当然横スクロールが表示されてしまいます。

解決策としてjqueryでこのブロックのwidthの値を制御するようにしました。
今表示されているウインドウの幅を取得してその値を代入します。
それだけでは、ウインドウの幅を変更された時におかしな事になってしまいますので、
$(window).resizedeでウインドウ幅の変化を調べてその都度最新のウインドウ幅を代入するようにしてあります。

こんな感じのコードです。


var windowResised = false;
$(window).resize(function() {
if (windowResised !== false) {
clearTimeout(windowResised);
}
windowResised = setTimeout(function() {
pageWidth = $(window).width();
$(‘#bgFade div’).css(‘width’,pageWidth);

if($.browser.msie && $.browser.version < 8){ var fixforIE ='-'+$(window).width()/2;  $('#bgFade div').css('margin-left',fixforIE); } }, 200); }); [/javascript] また、IE7以前のブラウザですと、背景が実際のウィンドウ幅の半分ずれて表示されるというバグがありましたので、簡単な判定をして回避しています。 [javascript] if($.browser.msie && $.browser.version < 8){ var fixforIE ='-'+$(window).width()/2;  $('#bgFade div').css('margin-left',fixforIE); } [/javascript] クロスフェードする要素でpostion:absoluteしているので、うまくレイアウトできない場合があります。 実際にページに組み込む場合は、少しテクニックが必要ですが、ダイナミックな演出を使いたい場合など、利用できるかもしれませんね。

一応使い方を

html

<!-- クロスフェードするブロックは#bgFade内に記述します。 -->
<div id="bgFade">
 <div class="slide01"></div>
 <div class="slide02"></div>
 <div class="slide03"></div>
 <div class="slide04"></div>
</div>

<!-- ここから下が実際のコンテンツになります。 -->
<div id="container">
 <div class="content">
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
  <p>ここにコンテンツを記述します。</p>
 </div>
</div>

css

/* クロスフェードする背景のdivを重ねておきます */
#bgFade div {
  position: absolute;
}
/* クロスフェードする背景の定義
  widthはjqueryで動的に入れるので定義しません
*/
.slide01 {
 background: url(../images/01.jpg) no-repeat center top;
 height: 510px;
}
.slide02 {
 background: url(../images/02.jpg) no-repeat center top;
 height: 510px;
}
.slide03 {
 background: url(../images/03.jpg) no-repeat center top;
 height: 510px;
}
.slide04 {
 background: url(../images/04.jpg) no-repeat center top;
 height: 510px;
}

あとは、jqueryとbgFade.jsを読み込めば完了です。
プラグイン化してませんので、設定は適当に変えてください。

Advent Calendar in 信州松本(だけじゃなくてもいいよ)残り5日です。見切り発車的にスタートしましたが、お陰様で全枠埋めてもらいました。あと少し、業務も忙しいと思いますが、頑張っていきましょう!
明日は、@Ken_54さんの同僚の方がデザイン系のネタを書いてくださる予定です。お楽しみに!

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。