Parallax in WP Theme

[Gunnar Bittersmann]

@@Auge

Du kannst dazu einem Element eine Klasse oder ein anderes Attribut hinzufügen oder wegnehmen, die/das im CSS als Selektor dient. In diesem Fall ist das CSS statisch und bildet von vornherein alle auftreten könnenden Fälle ab und das Dokument wird an diese Fälle angepasst.

Das dürfte fürs Scrollen aber kaum praktikabel sein. Hattest du vor, tausendundeine Klasse zu erstellen?^[1]

.p0    { background-position-y: 0% }
.p1    { background-position-y: 0.1% }
.p2    { background-position-y: 0.2% }
 ⋮
.p998  { background-position-y: 99.8% }
.p999  { background-position-y: 99.9% }
.p1000 { background-position-y: 100% }

Damit wäre der Parallaxeffekt feinstufig, nicht flüssig.

---

Begrifflichkeiten:

Du kannst aber auch, wie Gunnar es hier tut, mit CSS-Variablen arbeiten,

Custom properties – das sind mehr als bloß CSS-Variablen.

„Der übelste Streich, den der Teufel je gespielt hat, war Menschen dazu zu bringen, CSS custom properties ‚Variablen‘ zu nennen.“ — Kitty Giraudel

Dabei wird die Struktur des HTML-Dokuments selbst nicht angerührt

Man rührt sowieso nicht das HTML-Dokument an, sondern das DOM.

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

---

1. Mit CSS-Präprozessor ginge das. Aber solch generiertes CSS möchte man nicht haben. ↩︎