信州松本(だけじゃなくてもいいよ)20日目、担当4_1です。昨日のToro_Unitさんの投稿、僕は、普段独自のCMSを使っているので、wordpressの可能性を感じて大変参考になりました。このブログもwordpressでつくってあるんですけどね。「ブログ」の域をを越えて、CMSとしてもwordpress使ってみたくなりました。今日のネタは、少しかぶってしまいますが、jqueryで背景画像をクロスフェードさせるのです。わからない説明ですが、こんな感じです。2012年12月号に掲載されていたサンプルを参考にしています。今回のデモですと、画像ではなく背景画像を指定したdivをクロスフェードさせています。背景画像なので当然、widthとheightを指定しないと画像は表示されません。heightは画像の高さを指定すればいいです。widthは?画像のサイズを指定してしまうと、実際のコンテンツサイズよりも大きくなってしまう可能性があります。(コンテンツエリアよりも広いスペースでのクロスフェードを想定してます)その場合、当然横スクロールが表示されてしまいます。解決策としてjqueryでこのブロックのwidthの値を制御するようにしました。今表示されているウインドウの幅を取得してその値を代入します。それだけでは、ウインドウの幅を変更された時におかしな事になってしまいますので、$(window).resizedeでウインドウ幅の変化を調べてその都度最新のウインドウ幅を代入するようにしてあります。こんな感じのコードです。IE7以前のブラウザですと、背景が実際のウィンドウ幅の半分ずれて表示されるというバグがありましたので、簡単な判定をして回避しています。クロスフェードする要素でpostion:absoluteしているので、うまくレイアウトできない場合があります。実際にページに組み込む場合は、少しテクニックが必要ですが、ダイナミックな演出を使いたい場合など、利用できるかもしれませんね。クロスフェードするブロックは#bgFade内に記述します。ここから下が実際のコンテンツになります。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。<p>ここにコンテンツを記述します。510px;}あとは、jqueryとbgFade.jsを読み込めば完了です。プラグイン化してませんので、設定は適当に変えてください。信州松本(だけじゃなくてもいいよ)残り5日です。見切り発車的にスタートしましたが、お陰様で全枠埋めてもらいました。あと少し、業務も忙しいと思いますが、頑張っていきましょう!明日は、@Ken_54さんの同僚の方がデザイン系のネタを書いてくださる予定です。僕がscssでいいなと思う4つの機能とまとめカテゴリーweb制作コメントは受け付けていません。超シンプルなスマホサイトをテンプレート作ってみた41です。長野県松本市でweb制作会社に勤めています。このブログではweb制作に関わるネタ、仕事の中で困った事などを書いていきます。キャッチコピー力の基本』を読んだ。面倒な議事録の作成に超便利なwebアプリ『sign』WEBディレクターの仕事のスピードを格段に向上させる、ワイヤーフレームの作り方。【読んだ】歩き続ければ、大丈夫。Adwordsのアカウント管理が100倍楽になる。Edtior]のご紹介。provided問題は、Googleウェブマスターツールで解決すべし。知っておくと地味に便利。エクセル系アプリでWEB制作業務を改善する2つのテクニック。EvernoteでMarkdownを実現する方法について考えてみた。Colorリリース記念。