パララックス(視差)とは
【視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること】らしい。ホームページに奥行きを作りたいときに設定するといいみたい。
background-attachment:fixedはスマホで効かない
PCでパララックス効果を表現するには【background-attachment:fixed;】で行けるけど、なにせこのbackground-attachment:fixed;スマホだと普通にscrollしてしまいます。ですので今回は【position:sticky;】を使ってみようと思います。
htmlのコーディング
まずはmarkupから。一般的なタイプのhtmlをコーディング
cssの設定
.sticky {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: -webkit-sticky;
position: sticky;
top: 0;
}
p {
display: inline-block;
font-size: 60px;
padding: 0;
margin: 0;
}
.header {
background: #212E32;
color: #fff;
z-index: 100;
}
.content_1 {
background: #85937A;
z-index: 200;
}
.content_2 {
background: #f0f;
z-index: 300;
}
.content_3 {
background: #00f;
z-index: 400;
}
.footer {
background: #0ff;
z-index: 500;
}