#22
マウス連動のパララクスで表現するチルトシフトエフェクト
Parallax
published
on
note
異なる移動率を適用した複数の画像レイヤーを重ねて、マウスカーソルやタッチ操作に連動するパララックス効果を実現することで、チルトシフト撮影のようなエフェクトを表現しています。視差を持った各レイヤーのアニメーションとブラー効果による、奥行き感のある立体的なビジュアルに仕上がっています。
背景・中景・前景の3層の画像を同じ位置に配置し、重なり順を制御します。マウスやタッチの座標を取得し、要素の位置を基準とした相対座標に変換した後、-1から1の範囲で正規化します。正規化した座標値に移動率を掛けてtranslate3d関数の引数に適用することで、マウスやタッチ操作に追従する3D空間での動きを実現します。z軸の値では深度を表現し、背景レイヤーに対してブラー効果を加えることでチルトシフト効果をより強調しています。また、操作中のスクロール制御やパフォーマンスの最適化など、細かな調整も加えます。
ヒーローヘッダーやキービジュアル、製品紹介ページの画像ギャラリー、ポートフォリオサイトの背景表現などに適しています。移動率を調整することで繊細な視差から強い奥行き感まで幅広くチューニングでき、ユーザーの視線や操作に追従するインタラクティブな演出としても活用できます。チルトシフト撮影の独特な雰囲気をWeb上で再現できるため、訴求したい内容や表現をより強調し、印象的に魅せることができます。