Bild basierend auf Bildlaufposition ändern

Question

Ich versuche ein Skript zu implementieren, das Bilder "jedes Mal" ändert, wenn der Benutzer nach unten scrollt.

Ich lese etwas über und ich denke, die beste Praxis ist Bilder ersetzen, sobald Benutzer eine bestimmte Scroll-Position erreichen.

Die Website wird 3 Hauptabschnitte haben: 1) Einführung: die Kernnachricht + "Anweisung" zu verwenden; 2) Animation: Wenn der Benutzer nach unten scrollt, wird die Animation angezeigt. Das Bild ändert sich also alle 10 Pixel (oder mehr/weniger), aber der Benutzer sieht immer wieder denselben Abschnitt. Es ist eine Art GIF, bei der der Benutzer die Kontrolle über das Timing hat. Dies ist nützlich, damit der Benutzer jede Zeichnung sehen kann (oder schneller gehen kann, wenn er nicht alle sehen möchte). 3) Fazit: letzte Nachricht + mein Kontakt.

Jeder Abschnitt hat "100% der Gerätehöhe" und "100% der Gerätelänge" (jedes Gerät hat seine eigene Dimension). Diese Zahlen sind nur nützlich, um Sie zu verstehen.

Mit anderen Worten, die "Animation" folgt diesem Pfad: 1) erstes Bild bei 0 Pixel (von oben, zum Beispiel); 2) zweites Bild bei 10 Pixel (von oben zum Beispiel), das das erste ersetzt; 3) drittes Bild bei 20 Pixel (von oben zum Beispiel), das das zweite ersetzt; 4) viertes Bild bei 30 Pixel (von oben zum Beispiel), welches das dritte ersetzt; ecc.

Kennen Sie eine Möglichkeit, dieses Skript zu implementieren?

Answer 1

Ich würde jedes Mal ein Ereignis auslösen, wenn die Seite gescrollt wird, dann die Position der Spitze des Zielelements abrufen und dann meine Logik dort tun. Hier ist ein Codebeispiel:

// 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"); 
} 
});