JavaScript - Eine Animation ab einer bestimmten Scroll-Position starten

Eine Animation (oder was auch immer) ab einer bestimmten Scroll-Position im Browserfenster starten.

Damit die Animation nicht erst an der Oberkante des Elements beginnt, soll diese bereits gestartet werden wenn die rote Linie überschritten wird. Nach unten scrollen!

Hier das verwendete JavaScript um die Scroll-Position zu ermitteln und die Animation auszuführen. Unter: Animationen mit Keyframes gibt es weitere Beispiele.

<script>
window.addEventListener("load", function() {
 window.onscroll=function () {

 // Die Position des Elements von oben ermitteln
 var element document.getElementById("Sun").offsetTop
  // Die Höhe des Elements mit der roten Markierung davon abziehen
  document.getElementById("Markierung").offsetHeight;

   // Die aktuelle Scroll-Position ermitteln
  if (document.body.scrollTop element ||
      document.documentElement.scrollTop element) {

    // Die CSS-Klasse der Animation hinzufügen
    document.getElementById("Sun").className "rising";
  }
  else {

    // Die CSS-Klasse der Animation wieder entfernen
   document.getElementById("Sun").className "";
  }

 }
});
</script>

Ab einer bestimmten Scroll-Position eine (gelbe) Hintergrundfarbe anzeigen


<script>

window.addEventListener("load", function() {
 
window.onscroll=function () {

let suns document.querySelectorAll('.Rising').length;

 for (var 
0sunsx++) {
  var 
element document.getElementsByClassName("Rising")[x].offsetTop
   document.getElementsByClassName("Block")[x].offsetHeight;
 
   if (
document.body.scrollTop element ||
       
document.documentElement.scrollTop element) {
     
document.getElementsByClassName("Rising")[x].classList.add("Sun");
   }
   else {
    
document.getElementsByClassName("Rising")[x].classList.remove("Sun");
   }
 }

 }
});
</
script>

<
style>
div.Block {
margin-top125px;
padding15px;
borderSolid 1px #000000;
}

.
Sun {
background#FFFF00;
}
</
style>

<
div class="Rising Block">
Weit hintenhinter den Wortbergenfern der Länder Vokalien und Konsonantien leben die Blindtexte ...
</
div>

...

<
div class="Rising Block">
Es packte seine sieben Versalienschob sich sein Initial in den Gürtel und machte sich auf den ...
</
div>

Siehe auch: Eine CSS-Klasse hinzufügen, wenn ein Bildlauf durchgeführt wird