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

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

[botp]

おもしろい！

[hvc-001]

面白い

[kagioo2uma]

全然使わないだろうけどこれはすげーｗ

[syakkin44]

こんな事できるんだ

[shoshirasaka]

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

[hamuzou_66]

すげぇ、けど個人用かな

[tarchan]

横にスクロールさせると...