要約
CSSの2D transformだけで3D感がある安価で効果的なアニメーションを作成した。
背景
WebGLなどの3Dのアニメーションを利用しようとすると負荷が高いサイトになる。また、Webコンテンツと3Dコンテンツの折り合いのためにはややこしい計算が必要で、コンテンツの増減に対して融通が効きにくいサイトになりがちになっていた。
きっかけ
YouTuberの瀬戸弘司さんが、Adobe Premireで、写真を切り抜いてリズミカルに動かすアニメーションを作っていた。
一点透視図法を利用することで3D計算をせずに2D画像を拡大するだけで、3Dオブジェクトが手前に移動しているかのような錯覚を与えることができる。
真似てみる
Photoshop上で再現してみる。
CSSのtransformアニメーションで実装してみた
CSSのtransformは、ハイパフォーマンス・アニメーションにもある通り、計算コストが低いアニメーションである。
Photoshop上で可能であることがわかったのでCSSで実装した。DEMO
重なったオブジェクトが動くと、もっと面白い
画像の権利の関係でここには載せられないが、重なったオブジェクトで試したDEMOもある。
重なったオブジェクトを切り出して、レタッチで隠れている部分を補正して個別に動かすと不思議な感じになる。
レタッチした箇所は動く上に一瞬しか見えないので雑でOK。
案件で使ってみた
左右のスピーカーにも使っているが、見て欲しいところはコンビニの流星部分。これを2D transformの拡大だけで再現している。爆音コンビニ DEAF-MART｜12/4（金）板橋区某所”
おまけ：ボツ案
最初は流星部分を記号的な表現にしようとしていた。DEMO
まとめ
CSSの2D transformのみで効果的なアニメーションを作成できた。
計算コストが低いため、大量に配置することができ、画面のうるささを表現するには最適なものとなった。
これからも活用していこうと思う。
