ウェブサイトに視差効果を実装したいと思っています。この種のスクロール効果を、互いに影響を与えることなくページのさまざまな部分に実装できるかどうかを知りたいです。
やりたいことの少し単純化した例を作成しました。スプライト（赤い円と緑の四角）を実際の背景とは異なる速度で上に移動させたいです。ただし、a）とb）の例は、異なるDIVにあり、同じコンテナー内の別のdivにある不規則な境界線があります。このような：
<div id="section-1">
<div id="1-top"></div>
<div id="1-content"></div>
<div id="1-bottom"></div>
</div>
スプライトをdivと境界線を通して上向きに移動する方法はありますが、メインの背景（この場合は青）には表示されません。
セクションb）の正方形はセクションa）まで移動しますか、それともオブジェクトが移動できるピクセル数またはパーセンテージポイントを制限する方法はありますか？
jqueryの視差に関連する回答がたくさんあるようです。
jsfiddleで遊んだ：http： //jsfiddle.net/thinkingsites/88sqh/2/
視差の秘訣は、後方に行くほど、より短い距離を移動するのに同じ時間がかかることです。それらを設定するための具体的な方程式はありませんが、少しの作業で行うことができます。
不規則な背景は、子要素のアニメーションに煩わされることはありません。
ここのサイドバーを見ると、視差jqueryには多くの答えがあるようですが、その一部はnikebetterworldの例に基づいているようですが、これはあなたが探しているものではないと思います。
あなたが達成したいことは、2つのスクリプトを使用して非常に達成可能です。
jQuery視差スクリプトを使用することに加えて、 jQueryスクロールスクリプトを使用して、赤い円と緑の四角の要件を処理する必要があります。
チェックアウトするデモはかなりあります。これらのオブジェクトは視差が背景とともに移動するdiv内に含まれているため、視差スクリプトの前に適切なスクロールスクリプトを選択する必要があります。
両方のスクリプトは垂直/スクロールアクティビティにイベントリスナーを使用するため、両方が調和して適切なアニメーションを作成し、各スクリプトが特定のタスクを処理します。
これだけでも、非常に特殊な機能のために2つの異なるAPIを使用できるため、柔軟性が向上します。
これは、正しいスクロールと視差スクリプトの検索を開始するための最新のプラグインを示す最近のSITEです。