スクロールしたときに背景だけスクロール速度が変わるようなパララックスは JavaScript で実装するのが一般的ですが、CSS で要素を 3D 空間上に配置する方法を使えば JavaScript なしでパララックスを実装することができます。
<divclass="container"><divclass="background">Background (z: -800px)</div><divclass="content">Content (z: 0px)</div></div>.container{width:100%;height:100vh;overflow-x:hidden;overflow-y:auto;perspective:800px;}.background{z-index:-1;width:200px;height:200px;margin:60pxauto;transform:translateZ(-800px)scale(2);background:hsl(39,97%,63%);color:white;}.content{position:relative;width:320px;height:640px;margin:0auto;background:hsl(175,61%,77%);color:white;}解説
Container
まず 3D 空間の基準となるコンテナ要素を作ります。
.container{width:100%;height:100vh;overflow-x:hidden;overflow-y:auto;perspective:800px;}- ここでは 100% x 100vh
overflow-y: autoでスクロールされるようにするperspectiveプロパティで空間の奥行きを指定する (perspective: 800pxだと 800px 手前の場所から見ている感じになる)
Background
次に背景。
.background{width:160px;height:160px;margin:80pxauto;transform:translateZ(-800px)scale(2);background:hsl(39,97%,63%);color:white;}translateZで z 軸方向の位置を指定する (ここでは基準のコンテナより 800px 奥に配置)
z 軸方向の位置が奥に行くほど見かけ上のサイズが小さくなりますが、scaleに (z軸方向の位置) / -(perspective) + 1の値を指定すると元のサイズに見せかけることができます。
さいごに
ここで紹介したパララックスを使ってポートフォリオを作りました。
Next.js + Vercel (Now) でポートフォリオ作りました👌https://t.co/N1LYdqxIFSpic.twitter.com/g5xu0wFbsF
— やまいも (@yarnaimo) April 27, 2020