ご覧のサイトは、背景アタッチメントを活用してweb学習で制作されたサイトです。
<!– CSSで画像を「相対位置で固定」する –>
/* Turn off parallax scrolling for tablets and phones */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
background-attachment: fixed;
}
Scroll up and down to really get the feeling of how Parallax Scrolling works.
/* parallax */
<!– スマホ対応用に「430x430」サイズの画像を用意する –>
@media (max-width:600px){
.bgimg-1 {
background-image: url('img_parallax1-430x430.webp');
}
.bgimg-2 {
background-image: url('img_parallax2-430x430.webp');
}
.bgimg-3 {
background-image: url('img_parallax3-430x430.webp');
}
.bgimg-4 {
background-image: url('img_parallax4-430x430.webp');
}
}