面白法人カヤックの背景画像が面白い。
スクロールする度にチカチカと背景画像が変わる。
何だこれはと思ってとりあえず名前をつけて背景を保存。
オレンジのストライプ。
で、ソース見る。
color.cssに書かれてた。
/* body theme */ body.cv_0 { background: #FFAC1A url(/img/common/cv/bg_body_0.png) scroll repeat-y 50% 0; } body.cv_0 div#containerCover { background: url(/img/common/cv/bg_cover_0.png) fixed repeat 50% 0; }
原理は、入れ子になった2つのブロックに対して背景画像をつけて、手前の画像はスクロールしない用にしておく。
ただそれだけらしい。
奥側の画像は、2枚の画像を1ピクセルごとに編み合わせるような感じの画像。
手前の画像は、奥側の画像を1ピクセルごとに表示非表示させる為のマスクの役割。
やってみた。
マスク画像作成
bg_cover_0.png。
上にかぶさるマスク。
ストライプ作成
さっきのパターンで塗りつぶし。
色つきの部分を全部選択してその選択範囲をオレンジとかでガシガシ塗る。
透過PNGで保存。
ストライプ画像作成
bg_body_0.png。
マスクに隠させる本体。
1ピクセルごとの画像作成(1枚目)
以下レイヤー作成。
・ストライプに塗りつぶされたレイヤー。
さっきのパターンで塗りつぶし。
・絵とか字とか書かれたレイヤー。
普通に書く。
・無地のレイヤー。
パターンと同じ色で塗りつぶし。
3つのレイヤーを結合。
無地の色を自動選択して削除。
HTML/CSS作成
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>面白法人カヤックの背景</title> <style type="text/css"> * { margin: 0px; } body { background: #ff9900 url("kayac_body.png") scroll repeat-y 50% 0; } #cover { background: url("kayac_cover.png") fixed repeat 50% 0; } #contents { height: 5000px; color: #ff9900; } </style> </head> <body> <div id="cover"> <div id="contents"> a </div> </div> </body> </html>
