Parallax in WP Theme

[Killua]

Ich mag Parallax Effekte jeder Art, am meisten jene, welche transform translate so eine richtige perspektivische Verschiebung zeigen.

Leider bin ich zu dumm dafür, das auch in irgendein WordPress Theme zu kriegen. (Nein, keins der Themes, die das nativ können taugt sonst was)

Alle Plugins, welche das noch für den Classic Editor, bzw. nicht nur mittels der (mir nichts nützenden) Shortcode Methode konnten (zB. das da), sind hoffnungslos veraltet oder/und fehlerhaft. Neue gibts nur für Gutenborg, den ich nie verwenden werde. Das einzige Plugin, welches genau das kann, was ich mir vorstelle, heißt "Supaz Easy Background" und ist leider auch schon uralt und versagt bei mobilen Geräten.

Ebenfalls sind mir die anderen Tipps zu hoch, wie etwa die, in einem anderen Thread genannte JS Version auf codepen.

Ein ganz besonders tolle Anleitung fand ich hier, auch eine pure CSS Version, aber 99x zu kompliziert für mich.

Also ich kann einiges nachstellen, aber nur mit eigenem HTML und so. In ein Theme einbauen habe ich stundenlang versucht, da bewegt sich schon auch was, nur stets das falsche.

Ergo müsste ich ein WP Template eines Child-Themes umbauen, um die Struktur so hinzubiegen, wie diese Anleitungen es beschreiben. Das wäre mir zwar möglich, aber ich hätte lieber andere Beispiele, Tipps, Tricks, Tuts zum Thema.

Ev. weiß noch wer einfache, gar deutschsprachige Anleitungen oder ein WP Plugin oder ... ?

[Gunnar Bittersmann]

@@Killua

Ebenfalls sind mir die anderen Tipps zu hoch, wie etwa die, in einem anderen Thread genannte JS Version auf codepen.

Ich hab mal in dem anderen Thread beschrieben, was der Einzeiler tut.

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

[Killua]

Danke für diese Erklärung, die sogar ich zT.(*) kapiere.

Doch abgesehen davon, dass ich eine rein CSS basierte Lösung immer bevorzuge, kann ich trotz des Wissens zum JS diese (und die anderen Tipps) nicht in ein WP Theme verpflanzen.

Vllt. brauche ich eher ein dödelsichere Übersetzung der transform translate Methode. Diese habe ich im Frickl zerlegt, abgespeckt usw. Doch wie gesagt, im WP Header oder wo auch immer lauten die (oft zu vielen) Divs anders, sind anders verschachtelt und da bewegen sich dann stets die falschen Teile...

Ich versuchte z.B. ganz einfach die beiden obligaten H1 u. H2, wie sie in fast jeden WP Header als Titel und Untertitel sind, unabhängig vom Header-Hintergrundbild zu bewegen. Habs nicht geschafft.

*) Wobei den Pkt. 4 der Erklärung kapiere ich nicht:

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.

ist JS da nur fürs auslösen zuständig, oder was?

[Auge]

Hallo

*) Wobei den Pkt. 4 der Erklärung kapiere ich nicht:

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.

ist JS da nur fürs auslösen zuständig, oder was?

Nun, du kannst im Ergebnis einer Verarbeitung einem Element neue oder geänderte CSS-Eigenschaften zuweisen, indem du den Inhalt des style-Attributs des Elements manipulierst. Viele Skripte tun das auch so. Gunnars Weg ist es, die CSS-Eigenschaten dem Element auf anderem, (möglichst) nicht das HTML-Dokument selbst manipulierenden Weg zuzuführen.

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.

Du kannst aber auch, wie Gunnar es hier tut, mit CSS-Variablen arbeiten, deren Wert dann per JS manipuliert wird. Dabei wird die Struktur des HTML-Dokuments selbst nicht angerührt, sondern nur die CSS-Definitionen geändert.

Tschö, Auge

[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. ↩︎

[Gunnar Bittersmann]

@@Killua

*) Wobei den Pkt. 4 der Erklärung kapiere ich nicht:

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.

ist JS da nur fürs auslösen zuständig, oder was?

Nein, mit JavaScript wird beim Scrollen die jeweils aktuelle Scrollposition ermittelt und daraus der zugehörige Wert für background-position-y berechnet.

Wenn man ganz oben auf der Seite ist, kommt da 0% raus; vom Burj Khalifa ist die Spitze zu sehen. Wenn man bis ganz unten gescrollt hat, kommt da 100% raus und man sieht den Fuß des Gebäudes.

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

[Killua]

Nochmal danke an @alle

Aber wie gesagt, ich möchte bloß den eingangs beschriebenen, rein CSS basierten Weg gehen.

Bez. der Erklärungen zu der JS Lösung begreife ich ein paar Dinge, das andere nicht. Dabei ist das Hauptproblem nicht so das Verständnis der Funktion, sondern nochmal: Wie im Theme umsetzen? Das schaffe ich ja nicht einmal mit den sicher einfacheren translate transform Sachen.

Alternatives Plugin gefunden Das folgende ist ev. für euch Code-Profis weniger interessant, wohl aber vllt. für WP Nutzer:

Andererseits fand ich inzwischen einen Weg, eins der WP Parallax Plugins (konkret "Advanced WordPress Backgrounds") doch für mein Theme zu nutzen. Das Hindernis war ja, dass 90% dieser Plugins nur mehr für den Gutenborg sind und der Rest nur mit Shortcodes statt Klassenzuweisungen arbeitet.

Das Template der Startseite meines Themes zeigt aber keine Inhalte dieser Seite an, daher sind die üblichen Shortcode Methoden dort nicht nutzbar. Also erstellte ich ein eigenes Template dafür, welches das ausgeben kann: echo do_shortcode('[shortcode_des_plugins]');

Oder ich erstelle den (vom Plugin generierten) Shortcode wie üblich direkt in der Startseite und lasse den Inhalt der Startseite doch ins Template: get_template_part('content', 'page');

Noch eine Möglichkeit (etwa den Header betreffend) ist, die Funktion, welche den Header erzeugt, in die functions.php des Child-Themes zu geben, für die Ausgabe der Shortcodes anpassen, fertig.

Jede der Möglichkeiten stellt für mich eine ausreichende Lösung dar.

Was aber nicht heißt, dass ich nicht weiter versuche, die selbst codierten Beispiele zu verstehen. Aber falls noch jemand Tipps hat, dann bitte nur zu der erwähnten CSS Methode.