Parallax-Effekt

[Gunnar Bittersmann]

@@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.offsetHeight abzüglich der Höhe des Viewports window.innerHeight.

• Die relative Scrollposition ist das Verhältnis der absoluten Scrollposition window.scrollY zum gesamten Scrollweg:
  window.scrollY / (document.documentElement.offsetHeight - window.innerHeight)

• Das Verhältnis wird in Prozent umgerechnet, d.h. × 100%. * 100 passiert innerhalb von ${ … }; das Prozentzeichen wird an die Zahl angehangen: `${ … }%` (template literal).

• Den Wert könnte man nun direkt document.documentElement.style.backgroundPositionY zuweisen. Ich bin aber kein Freund davon, Werte von CSS-Eigenschaften mit JavaScript zu ändern. Deshalb weise ich den Wert der custom property --y zu.

• Durch html { background-position: center var(--y, top) } im Stylesheet kommt der Wert bei der CSS-Eigenschaft an. (top ist der Defaultwert, wenn --y nicht 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.

🖖 Живіть довго і процвітайте