セクションごとに背景を変化させる
Section0
ここは1番目のコンテンツです。
- 画面を開くと1度だけフェードインが発生する。
フェードイン時のみの背景が表示される。
(それ以降ページ上部に戻り、再度1番目コンテンツへスクロールしてもフェードインは発生しない) - 左のメニューがコンテンツにかかるので、メニューのサイズ、ページの余白等で調整する。
- スマホ画面に収めるには幅等を別途調整必要。
- 1セクションページが長くなったら縦スクロールが出て、次のセクションに行くまで背景は変わらない。
- 1セクションページが短く100vhに満たない場合でも、次のセクションがページ上部まで来れば背景が変わる。
Section1
ここは2番目のコンテンツです。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section2
ここは3番目のコンテンツです。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section3
ここは4番目のコンテンツです。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section4
ここは5番目のコンテンツです。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.