テクスチャをスクロールに合わせて移動させる「displacement maps」のテクニックを使用したスタイルシートをRomán Cortésから紹介します。
「displacement 」は移動、転置、置き換え、といった意味で、CSS1のbackground-attachmentとbackground-positionを利用して、スクロール時に画像の異なる部分を表示させています。
当初はコードの複雑さと巨大さでサイズが肥大化するだろうと思われていましたが、5KB以下のコードで実装できたそうです。
対応ブラウザはIE8, Fx3.5, Op10, Safari4, Chrome3で動作テストをしたとのことです。
Post on:2010年1月28日
