jquery - フォールドの下に表示される固定要素の作成

Question

これに似た効果を作ろうとしています。背景は固定ですが、特定の要素の後で変化します。私はこれにかなりの時間を費やしましたが、これを行う方法の説明に近いものはまだ見つかりません。

基本的に、私はその正確な効果を模倣する方法を学ぶことでした. 画像を修正したいのですが、スクロールしなければ見えない位置に表示されます。答えはjQueryにあると確信していますが、どこから始めればよいかわかりません。

Answer 1

私はこれを試してみます：

1. 複数の背景レイヤーを構築し、それらすべてをvisibility:hiddenで重ね合わせposition:fixedます。
2. jQuery.scroll()と.addClass()メソッドを使用して、表示する背景を選択します。

JSFiddle に例を実装しました: http://jsfiddle.net/zbn2L/

背景は単色なので固定とは思えませんが、著作権侵害はしたくありません。

Answer 2

非常に簡単に言えば、すべての「開口部」(さまざまな背景が後ろから現れる領域) を他の div と同じように作成できますが、

background-attachment:fixed

あなたが持っているなら

[背景]
[コンテンツ]
[コンテンツ]
[その他の背景]
[コンテンツ]
[コンテンツ]
[さらに別の背景]

それは基本的に

  <div style="background-attachment:fixed"></div>
  <div>Content</div>
  <div>Content</div>
  <div style="background-attachment:fixed"></div>
  <div>Content</div>
  <div>Content</div>
  <div style="background-attachment:fixed"></div>