Movable Type 備忘録

 ナイスアイデアな背景画像の見せ方

  • Jan182009
  • Vote:
    http://bizcaz.com/archives/2009/01/18-055214.php
  • Categories: Tools
  • Tags:
  • Social Bookmark

おはよございます^^

ただいま早朝 5:30 でございます。
何だか寝れなくなっちゃったので、以下のページでご紹介されてた、スクロールに連動して背景画像を変更する CSS のサンプル作ってみました。

なるほど･･･というような CSS のテク!? です。
今まで思いつきもしませんでした (;￣∇￣A

サンプルを表示できませんでした。

上記サンプルをスクロールすると、スクロールに連動して背景画像が代わってるのが分かると思います。
タネあかしすると、単純に 2 つの画像を background-attachment に 'fixed' を指定してるだけです。単純だけどナイスアイデアだと思いました。
ちなみにこのテク!? は IE6.x では使えません。

マークアップ

具体的には以下のようにマークアップします。

マークアップ

  1. <body>
  2.     <div class="alpha">
  3.             ：
  4.     </div>
  5.     <div class="beta">
  6.             ：
  7.     </div>
  8. </body>

上記の alpha と beta というなかんじで div 要素を用意するだけです。
そして CSS は以下のようになります。

スタイルシート

  1. .alpha {
  2.     background: #dbded1 url(1.png) no-repeat 10px 10px fixed;
  3. }
  4. .beta {
  5.     background: transparent url(2.png) no-repeat 10px 10px fixed;
  6. }

ポイントは青字の部分で画像を同じ場所に固定してることです。
基本的に fixed による固定の場合配置される座標は body からの絶対座標になるので、上記サンプルでは画像のポジションを以下のようにいい具合に位置を調整してます。

スタイルシート

  1. .alpha {
  2.     background: #dbded1 url(1.png) no-repeat 18px 250px fixed;
  3. }
  4. .beta {
  5.     background: transparent url(2.png) no-repeat 18px 250px fixed;
  6. }

以上です。
仕組みがカンタンなので、自分のサイトにも組込みやすそうですね。 CSS は奥が深いなぁ･･･と革めて実感したのココロ (●´∀｀●)

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード