background-image transitionieren

[Nico R.]

Hallo Gunnar,

Hier steckt schon der erste Fehler. Warum per JavaScript?

Weil ich ja die Scrollposition überwachen will. Ich wusste nicht, dass das auch per CSS geht. Ich hätte natürlich statt des background-image eine Klasse autauschen können. Aber eine CSS-Manipulation bleibts ja.

Möglicherweise braucht man kein JavaScript. Soll der Bildwechsel bei einer bestimmten absoluten Scrollposition vollzogen werden oder bei einer relativen (bezogen auf den gesamten Scrollweg)?

Klingt interessant. Bei einer absoluten Position. Immer, wenn window.pageYOffset > 100

Dann geht’s mit scroll-driven animation, guckst du.

Bei mir funktioniert die Demo nicht. https://scroll-driven-animations.style/ sagt: Your browser does not support Scroll-Linked Animations. Mein Firefox ist aktuell (128.0).

Damit ist die Variante für die nähere Zeit eigentlich schon raus und es bleibt wohl bei der JS-Lösung.

Ich werde mir noch nochmal die Sache mit diesem IntersectionObserver anschauen. Ich habe aber nicht den Eindruck, dass mein Browser mit dem Abhorchen des scroll-EventListeners Probleme hat. Wenn ich mir anschaue, was auf manchen Seiten so im Hintergrund abgeht, ohne dass der Browser murrt, sehe ich das auch recht entspannt, denn meine Seiten versuche ich schon, so gut wie möglich schlank zu halten.

Gruß Nico