skrollr を使用して非常に単純な視差レイアウトを構築する方法を理解するために、半ダースのチュートリアルと数日を試したに違いありません。
背景画像を含む 3 つの div があり、それぞれがページの下の異なる位置にあります。それぞれに、ページ レイアウトではなく、ビューポート内の位置に相対的な背景スクロールが必要です。
相対モードを指定する方法と、ビューポートに表示されている間、背景画像をスクロールする方法を理解することはできません。ビューポートのロールアップが完了する前に、スクロールを停止します。
私のデモページはこちら: http://3fishbeta.co.uk/build/040-skrollr/05-skrollr-positioning
ページの最初のイメージ コンテナは次のとおりです。
<div class="imageContainer" data-bottom="background-position:50% -700px;" data-top-bottom="background-position:50% 0px;" data-anchor-target="#trigger1" ></div>
data-top または data-bottom の設定がわかりません。コンテナがビューポートを離れるまで画像はスクロールし続けますが、早期に停止します。
つまり、コンテナの上部がビューポートの上部に到達すると、画像の動きが止まります...代わりにコンテナの下部にあるはずです...と思います。
誰でも助けてくれますか??!