Nutspress

CSSをパララックス効果を使ったクリスマス仕様に変更

テーマ変更したばかりでまた変更！？クリスマスまでの期間限定でスタイルシートを変更しただけ。.pngで作った背景画像を使ってパララックス効果なんての取り入れてみたり、久しぶりにCSSハックやJavascriptなんて小技を使ってます。

パララックス効果を出すためのCSSの設定はやってみると意外と簡単。

一番下にある背景はbodyに設定。.jpgで出来るだけ軽めに作ってます。
その上に#backgroundと#midbackground、それぞれ透過部分を残した.pngで作った背景画像を設定。

#background {
	width:100%;
	background:url(xxx/snow1.png) 20% 20% repeat fixed;
	position:absolute;
	
}
#midbackground {
	width:100%;
	background:url(xxx/snow2.png) 40% 90% repeat;
}

background-positionのプロパティを%で指定するところがポイント。あとfixedとかも使ってみると固定されている部分とスクロールしていく部分で動きが出て面白いです。雪の結晶も大小2枚くらい分けて設定したら、もうちょっと雪が降ってるような感じに出来るかもしれない。

気をつけたのはページ読み込みがかなり重くなることを考慮して.pngを作るさいにレイヤーを重ねずに色数少なくして出来るだけ軽く作ったことくらい。

**.pngを使ってるのでIE6.0以下のブラウザに対しては別のCSSを読み込ませるようにしてるので、CSSをいっぱい書かないといけないという辛さはあるものの出来上がりに自己満足出来るので楽しかったりする。

テーマを作るに当たって今回は年間を通じて季節のイベント毎にスタイルシートを変えてみようとJavascriptを使ってみた。自分でスクリプトを書くのは出来ないので、ありものを使わせてもらってます。使用してるのは『日付でスタイルチェンジャーver.2.0』

<script type="text/javascript">
s_d_css = new Array();
s_d_dat = new Array();
	
//設定
s_d_css[0] = 'xxx.css';  //条件に合わない時のスタイルシート
s_d_dat[1] = '12.15-12.25';     //1個目の日付の条件
s_d_css[1] = 'aaa.css'; //1個目の条件にあった時のスタイルシート
//ここまで
	
s_d_Date  = new Date();
s_d_year  = s_d_Date.getYear();
if(s_d_year < 2000)
{s_d_year += 1900;}
s_d_mon   = s_d_Date.getMonth()+1;
s_d_date  = s_d_Date.getDate();
s_d_today = (s_d_mon*100)+s_d_date;
s_d_style = 0;
	
for(i=1;i<s_d_dat.length;i++)
{s_d_temp  = s_d_dat[i].split("-");
s_d_temp1 = s_d_temp[0].split(".");
s_d_temp2 = s_d_temp[1].split(".");
s_d_case1 = ((s_d_temp1[0]-0)*100)+(s_d_temp1[1]-0);
s_d_case2 = ((s_d_temp2[0]-0)*100)+(s_d_temp2[1]-0);
if(s_d_case1 <= s_d_case2)
{if(s_d_case1 <= s_d_today && s_d_case2 >= s_d_today)
{s_d_style = i;
break;}}
else if(s_d_case1 > s_d_case2)
{if(s_d_case1 <= s_d_today || s_d_case2 >= s_d_today)
{s_d_style = i;
break;}}}
	
with(document)
{open();
write('<link href="'+s_d_css[i]+'" rel="stylesheet"
type="text/css" />');
close();}
	
</script>

それぞれ設定した日付に合わせてスタイルシートを用意して読み込ませるだけで自動でスタイルシートが切り替わってくれます。一応、12月25日いっぱいまでは今のスタイルシートでそれ以降はデフォルトに戻ります。今後、お正月とかバレンタインに合わせて作って見ようかな～っと思ってます。

参考サイト：
パララックス効果については
パララックス効果を使ったウェブデザイン
パララックス効果をサイトがたくさん紹介されてます。
How to recreate Silverback’s parallax effect
スタイルシートの設定方法が詳しく書かれています。
Javascriptに関しては
ウェブ木箱：日付でスタイルチェンジャー

Tags: css, javascript, スタイルシート, ハック, パララックス効果

This entry was posted on 木曜日, 12 月 18th, 2008 at 8:57 am and is filed under ウェブデザイン関連. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.