ここで見られる背景効果をエミュレートすることに興味があります: (リンク)。基本的にはコンテンツが上にスクロールする静的な背景ですが、ページの「ウィンドウ」セクションごとに異なる背景があります。下記参照:
さらに下にスクロールします。
私の最初の考えは、各「ウィンドウ画像」が互いに垂直に積み重ねられた1つの巨大な静的背景を作成し、その上に透明な背景を持つdivを作成することでしたが、これは間違っているようです.
この効果を再現するにはどうすればよいですか?
一般に:
fixed
(前述のとおり)z-index
バックグラウンド コンテナーよりも大きくしますopacity
に設定して、特定のセクションの背景を「非表示」にします。0
背景画像と前景コンテナの幅を試して、うまくいくようにしてください。幸運を!
コピーしようとしているテーマの森でそのプレミアムを購入してみませんか。Web には、これを説明するパララックス スクロールのチュートリアルが多数あります。
fixed
CSS ポジショニングを使用して、トップ バーの効果を得ることができます。次に、ページの残りの部分では、 CSS ポジショニングdiv
を使用して、トップ バーの高さだけ下にシフトするある種のカプセル化を使用します。relative
次に、さまざまなページセクションに対して、次々に積み重ねられ、異なる背景を持つdivを作成します。