日曜日, 8月 26, 2012

CSS3のbackground-sizeプロパティを試す

CSS3で追加されたbackground-sizeプロパティに、contentかcoverを指定すると画像をウィンドウいっぱいに表示してくれるので、写真をでかく見せたい場合に使えそう。

Perfect Full Page Background Image

JavaScriptで切り替えられるようにしてみた。Chrome推奨です。
動作サンプル
https://gist.github.com/3473035

addEventlistenerのとこ、以前だったら何も考えずimg要素それぞれにイベントリスナーを登録してしまっていたけど、バブリングを利用するようにした。
How JavaScript Event Delegation Works

ステートフルJavaScriptで出てきた。

現状だと画像をそのまま引き延ばすので元データの解像度が低いと荒れてしまう。最大表示する際に画像を差し替えるなど工夫が必要。シンプルに使えるようにライブラリ化しておきたいところ。