私はStickyPanel、Smooth-Scroll、およびScrollyを使用しています。偶数の「ページ」には固定 (コンテンツがその上を移動) の背景が必要で、奇数の「ページ」には視差の背景 (コンテンツと背景が別々に移動) が必要です。したがって、私の「ページ」は偶数、奇数、偶数、奇数、偶数になります。「ページ」は上下に 5 つの div であり、各 div はブラウザー ウィンドウの幅と高さに設定され、1 ページの Web サイトを作成します。
私が抱えている問題は、視差の背景を持つ「ページ」2 & 4 で、背景の位置がずれていることです。要素を調べたところ、 Scrollyによって設定された background-positionがあまりにも離れていて、背景画像が表示されないことがわかりました。Scrollyには、スクロールする背景を持つ要素に設定する 2 つの属性があります。
<div data-velocity=".3" data-fit="1000">
これらにより、視差要素の速度を設定し、相対的な背景位置をそれぞれ設定できます。data-fit 属性を使用して背景を調整すると、「ページ」と背景の高さがブラウザー ウィンドウに相対的であるため、適切な場所に配置されないことがわかりました。
背景が常に div を覆っている必要があります。つまり、背景画像が透明度のない画像である場合、div の背景色は表示されません。
背景をブラウザウィンドウよりも最大10％多く設定すると役立つと思いますが、その方法がわかりません。
ここにjsFiddleがありますが、何らかの理由で背景画像が「ページ」に表示されません。
これは説明が難しい問題だったので、私の主張が十分に伝わっていないかもしれません。問題を説明するより良い方法を考えたら、投稿を更新します。
ありがとう