CSSで固定しないパララックス
2023/09/03
CSSのみで実装するパララックスと言えば、
「背景固定のタイプ」が一般的で
「背景をやんわり動かすタイプ」は基本JS使うと言うのが定石かと思いますが、JS使うとスマホでカクつくことが多いので、CSSだけでできないか実験してみました。
結果として、「簡易な物はできるけど本格的に作るならＪＳ」という感じのレベルのものができました。
CSS
Parallax
Parallax
<div>CSS<br />Parallax</div>
div{
margin:0;
perspective: 1px;
height: 400px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
font-size:20pt;
box-sizing:border-box;
font-weight:bold;
line-height:900px;
text-align:center;
color:#00a;
text-shadow:0 0 5px #fff;
}
div::before,
div::after{
position: absolute;
}
div::before{
content:"";
display:block;
width:100%;
height:400px;
opacity:0.8;
transform: translateZ(-5px) scale(8);
background-image:url(test.jpg);
background-size:cover;
z-index:-1;
}
div::after{
content:"Web Degsin";
display:inline-block;
width:auto;
top:100%;
right:-50%;
padding:0 20px;
font-size:22pt;
font-weight:normal;
text-align:center;
line-height:80px;
transform: translateZ(-2px) scale(2);
background:#3339;
color:#fff;
z-index:-1;
}
立体的な奥行きによってスクロール量が変化するという仕様を利用して、 それっぽいものができました。
カテゴリー:CSS