background-image transitionieren

[Gunnar Bittersmann]

@@Nico R.

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

Hm, vielleicht geht auch das nur mit CSS ohne JavaScript? Muss ich mal in Ruhe drüber nachdenken.

---

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).

Huch? Sollte ich … Ah ja, ich hab in meinen Fuchs das Feature-Flag layout.css.scroll-driven-animations.enabled gesetzt. Vermutlich, als ich da mal mit rumgespielt hatte.

Laut Can I Use bleibt das Feature auch noch für die nächsten Wochen hinterm Flag versteckt.

---

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

Warum? Ein Hintergrundbild ist per se schon Verzierung. Das Wechseln des Hintergrundbilds ist Schnickschnack – nice to have, aber wenn’s in manchen Browsern noch nicht geht, ist das auch nicht schlimm. Da kann man auf progressive enhancement setzen.

Aber wie gesagt, für das Wechseln nach 100px Runterscrollen ist mir auch keine reine CSS-Lösung eingefallen, deshalb hatte ich das ja auch mit JavaScript gemacht …

Ich werde mir noch nochmal die Sache mit diesem IntersectionObserver anschauen.

… und schalte mit IntersectionObserver eine Klasse um, worüber die Sichtbarkeit der Trennlinie unterm Header und des Footers geregelt wird. Bei dir wär’s dann das Hintergrundbild.

---

Ich habe aber nicht den Eindruck, dass mein Browser mit dem Abhorchen des scroll-EventListeners Probleme hat.

Wie @Matthias Scharwies schon sagte: dein Browser ist irrelevant. Relevant sind die Browser deiner Seitenbesucher.

Kwakoni Yiquan