[CSS]スタイルシートのすご技、スムーズに回転するコーラの空き缶

テクスチャをスクロールに合わせて移動させる「displacement maps」のテクニックを使用したスタイルシートをRomán Cortésから紹介します。

Pure CSS Coke Can

「displacement 」は移動、転置、置き換え、といった意味で、CSS1のbackground-attachmentとbackground-positionを利用して、スクロール時に画像の異なる部分を表示させています。

当初はコードの複雑さと巨大さでサイズが肥大化するだろうと思われていましたが、5KB以下のコードで実装できたそうです。

対応ブラウザはIE8, Fx3.5, Op10, Safari4, Chrome3で動作テストをしたとのことです。