yoshida_eth0の日記 このページをアンテナに追加 RSSフィード

2009-12-13

面白法人カヤックのサイトのチカチカする背景画像やってみた

面白法人カヤックの背景画像が面白い。

スクロールする度にチカチカと背景画像が変わる。

何だこれはと思ってとりあえず名前をつけて背景を保存。

オレンジのストライプ。

で、ソース見る。

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。

上にかぶさるマスク。

 

ストライプのパターン作成

色つき(白とか)と透過を縦に1ピクセルずつ繋げた、2ピクセルの画像を作る。

編集 => パターンを定義

 

ストライプ作成

さっきのパターンで塗りつぶし。

色つきの部分を全部選択してその選択範囲をオレンジとかでガシガシ塗る。

 

透過PNGで保存。

 

ストライプ画像作成

bg_body_0.png。

マスクに隠させる本体。

 

1ピクセルごとの画像作成(1枚目)

以下レイヤー作成。

・ストライプに塗りつぶされたレイヤー。

さっきのパターンで塗りつぶし。

・絵とか字とか書かれたレイヤー。

普通に書く。

・無地のレイヤー。

パターンと同じ色で塗りつぶし。

 

3つのレイヤーを結合。

無地の色を自動選択して削除。

 

1ピクセルごとの画像作成(2枚目)

1枚目と大体同じで、違いはストライプに塗りつぶされたレイヤーを1ピクセル下にずらす。

 

透過PNGで保存。

 

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>

 

スクリーンショット

kayac_cover.png

f:id:eth0jp:20091213041949p:image

kayac_body.png

f:id:eth0jp:20091213042026p:image

完成図(静止画じゃ解らないけど)

f:id:eth0jp:20091213042056p:image

 

ポケモンショックなんてやってる場合じゃなかった!

明日は朝早くから法事なのに。