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 x = 0; x < suns; x++) {
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-top: 125px;
padding: 15px;
border: Solid 1px #000000;
}
.Sun {
background: #FFFF00;
}
</style>
<div class="Rising Block">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte ...
</div>
...
<div class="Rising Block">
Es packte seine sieben Versalien, schob 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