最近よく見るWEBデザインで1カラムで背景画像や背景色をドーンと配置し、コンテンツ要素ごとに背景の画像や色がスクロールで切り替わるデザイン。
スタートアップ系の会社や新しいサービスや商品のLPなどでよく使用されているかと思います。
そこで今回は、そんな固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSSをご紹介します。
流行りのWEBページの制作をする際にかなり有用かと思いますので、ぜひ参考にしてみてください。
固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSS6選
固定された背景画像がスクロールで切り替わるCSS(Background-attachment fixed)
See the Pen
Background-attachment fixed by Wendy (@Wendy-Ho)
on CodePen.
要素ごとに透過した色のマスクが画像にかかるCSS(background mottos-background-attachment)
See the Pen
background mottos-background-attachment: fixed;固定背景 by Luke Cheng (@PhotoLuke)
on CodePen.
スクロールで背景画像にかかったマスクが外れるCSS(Pure CSS Background Image Scroll Effect)
See the Pen
Pure CSS Background Image Scroll Effect by carpe numidium (@carpenumidium)
on CodePen.
サイドの画像がスクロールで切り替わる2カラムCSS(Background Attachment Fixed within Container)
See the Pen
Background Attachment Fixed within Container by Ali Klein (@AliKlein)
on CodePen.
2枚の画像を使ったスクロールで道筋が表示されるCSS(Scrolling Backgrounds in CSS)
See the Pen
Scrolling Backgrounds in CSS – Seattle Trip by Geoff Graham (@geoffgraham)
on CodePen.
シンプルで使いやすいスクロールで画像が切り替わるCSS
See the Pen
Fixed background full sections by Justin Aven (@justinaven)
on CodePen.
