[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック

ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ファイルのダウンロード デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 エフェクトにスクリプトを使用していないので、スクロールも快適です！ 少しスクロールしたところ 写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。 実装 HTML HTMLはシンプルで、main要素をラッパーに、div要素で写真画像と

[karauma]

スクロールした際にメインビジュアルの上にベタ塗り背景が重なっていくようなエフェクト使えそう！

[laconic]

全画面の背景

[oitch01]

jsなしでできるんだ。シンプル。

[qrac_jp]

スクロールがめちゃくちゃ軽快☆ 記述方法でここまで違うのか！

[poppun1940]

ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタ

[z1a2nh]

固定めくり（スカート

[bayashi_net]

いいなこれ

[mcddx30]

パララックスではない背景固定でスクロール

[Sips]

CSS 背景固定

[hopekuson]

jsなしでこんな簡単に作れたとは

[nors]

http://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

[higa1234]

ちょうどこれほしかった

[hedeyoshi]

簡単に作れるようになっていいね

[ebisu3htn]

ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイ

[kana321]

スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。