【CSSで簡単に】固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSS6選【コピペで簡単実装】

最近よく見る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.

コチラもオススメ

2019年7月22日CSSのコピペで簡単に実装出来る！3DテキストエフェクトCSS19選【立体的ロゴ/3D文字/無料】 2018年6月22日CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 2019年7月16日【コピペで簡単実装】アニメーションがカッコイイ！送信ボタン用アニメーションCSS 9選【HTML/CSS/submitボタン】