スクロール位置に基づいて画像を変更

Question

「毎回」画像を変更するスクリプトを実装しようとしています。

私は何かを読んで、ユーザーが特定のスクロール位置に達すると画像を置き換えることがベストプラクティスだと思います。

ウェブサイトには、3つの主要セクションがあります。 1）紹介：コアメッセージ+使用する「指示」。 2）アニメーション：ユーザーがスクロールダウンすると、アニメーションが表示されます。したがって、10ピクセル（またはそれ以上）ごとにイメージは変化しますが、ユーザーは同じセクションを見続けます。これは、ユーザーがタイミングを制御するGIFの一種です。これは、ユーザーがすべての図面を見ることができるようにするために役立ちます（または、すべてを見ることを望まない場合は速く進むことができます）。 3）結論：最後のメッセージ+私の連絡先。

各セクションには、「デバイスの高さの100％」と「デバイスの長さの100％」（各デバイスには独自の次元があります）が表示されます。これらの数字はあなたに理解させるのに役立ちます。

つまり、「アニメーション」は次のパスに従います。 1）0ピクセルの最初のイメージ（たとえば、上から）。 2）最初のものを置き換える10ピクセル（たとえば上から）の第2のイメージ。 3）第2の画像を置き換える20ピクセル（例えば、上から）の第3の画像; 4）第3の画像を置き換える30ピクセル（例えば、上から）の第4の画像; ecc。

あなたはこのスクリプトを暗示する方法を知っていますか？

Answer 1

私は、ページがスクロールされるたびにイベントを発生させ、ターゲット要素の一番上の位置を取得してからロジックを実行します。コードサンプルは次のとおりです。

// can be any target 
$(body).scroll(function() { 
    // your even fired on scroll - get the offset of the closet parent element 
    // you will likely loop here 
    var position = $("elementYouWantToGetOffSetFor").position(); 
    if(position.Top >= previousElementsTop) // guessing you need to check it against closest sibling 
{ 
    // then do your image swap here 
    $("yourtargetimage").src("pathtowherethisis"); 
} 
});