2020年07月11日(土)

CSSだけでヒーローイメージのセクションにシンプルなパララックス効果

• 0
• 16
• 9
• 23

Result

See the Pen JjGZEBp by kachibito
(@kachibito) on CodePen.

CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれませんが。

内容としては3D空間を作り、ヘッダに疑似要素を作って背景画像を設定、z軸に沿ってオブジェクトを遠ざけるよう設定します。

header::before { transform: translateZ(-4px); } header div { transform: translateZ(-2px); }

また、3D空間の中でフラット描画されるよう、親要素にtransform-styleを設定しておきます。

header { transform-style: preserve-3d; }

これだけだと単に縮小された状態になってしまうのでscaleで戻してあげる必要があります。

scaleで戻すには計算が必要です。Googleの記事では以下の計算法が使われています。

scale = (perspective – distance) / perspective

本Tips...