@@Gunnar Bittersmann
Parallax-Effekt ist doch ein JavaScript-Einzeiler‽
Was der Einzeiler tut:
-
Der Länge des Scrollwegs ist die Höhe des gesamten Dokumenteninhalts
document.documentElement.offsetHeightabzüglich der Höhe des Viewportswindow.innerHeight. -
Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition
window.scrollYzum gesamten Scrollweg:
window.scrollY / (document.documentElement.offsetHeight - window.innerHeight) -
Das Verhältnis wird in Prozent umgerechnet, d.h. × 100%.
* 100passiert innerhalb von${ … }; das Prozentzeichen wird an die Zahl angehangen:`${ … }%`(template literal). -
Den Wert könnte man nun direkt
document.documentElement.style.backgroundPositionYzuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der custom property--yzu. -
Durch
html { background-position: center var(--y, top) }im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (topist der Defaultwert, wenn--ynicht anderswo gesetzt ist.)
Der Rest des Scripts sorgt dafür, dass ein scroll-Eventhandler gesetzt wird, sofern der Nutzer seinem Browser nicht gesagt hat, dass er lieber auf zu viel Bewegung auf der Seite verzichtet.
🖖 Живіть довго і процвітайте
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix