HTML CSS background-attachmentでパララックス効果 スクロール時に背景画像に動きをつける
background-attachmentでfixedを選択すると簡単なパララックス効果を表現することができます。
固定背景１
固定背景２
固定背景３
固定背景４
固定背景５
<div class="Wrapper">
<div class="Parallax BgImg1">固定背景１</div>
<div class="Parallax BgImg2">固定背景２</div>
<div class="Parallax BgImg3">固定背景３</div>
<div class="Parallax BgImg4">固定背景４</div>
<div class="Parallax BgImg5">固定背景５</div>
</div>
今回は<div>要素内で表現したので、widthを500px、heightを400pxにしていますが、画面全体でやるなら、widthを100%、heightを100vhにすればOKです。
CSS
.Wrapper{
margin: auto;
width: 500px;
height: 400px;
overflow-y: scroll;
position: relative;
}
.Wrapper>div{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
font-size: 5em;
color: white;
}
.Parallax{
background-position: 20% 80%;
/*要素の真ん中に画像が来るように調整しました。普通ならcenter
centerがいいでしょう。*/
background-attachment: fixed; /*ここが今回のポイント！！！*/
background-repeat: no-repeat;
}
.BgImg1{
background-image: url('画像のパスを入力');
}
.BgImg2{
background-image: url('画像のパスを入力');
}
.BgImg3{
background-image: url('画像のパスを入力');
}
.BgImg4{
background-image: url('画像のパスを入力');
}
.BgImg5{
background-image: url('画像のパスを入力');
}
