HTML CSS background-attachmentでパララックス効果 スクロール時に背景画像に動きをつける

background-attachmentでfixedを選択すると簡単なパララックス効果を表現することができます。

固定背景1
固定背景2
固定背景3
固定背景4
固定背景5
HTML <div class="Wrapper">
<div class="Parallax BgImg1">固定背景1</div>
<div class="Parallax BgImg2">固定背景2</div>
<div class="Parallax BgImg3">固定背景3</div>
<div class="Parallax BgImg4">固定背景4</div>
<div class="Parallax BgImg5">固定背景5</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('画像のパスを入力');
}

まとめ

これだけでパララックス効果がるくれるなんて簡単ですね。実際に実装するにはもうちょっと複雑なコードが必要になってくると思います。パララックスについてもっと研究し、人目を引くウェブをつくれればいいですね。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<