Parallax twenty twenty CSS WordPress

Twenty Twenty: Parallax-Effekt

2. Teil: Parallax-Effekt in WordPress

In diesem Beitrag (2. Teil aus unserer Serie) wollen wir am Beispiel des WordPress-Themes Twenty Twenty zeigen, wie man mit ein paar CSS-Regeln einen Parallax-Effekt erzeugen kann. Nach weiteren Recherchen konnten wir feststellen, dass über eine Eigenschaft des Block-Editors (Gutenberg) beim Cover-Block eine Lösung sogar ohne CSS-Regeln möglich ist. Der Block-Editor bietet mittlerweile so viele Optionen, dass einer der vielen Pagebuilder, die in WordPress angeboten werden meines Erachtens gar nicht benötigt werden.

Schon mal vorab: Der hier gezeigte Parallax-Effekt lässt sich natürlich auf jeden Fall noch optimieren. Daher soll diese Lösung zunächst nur mal eine Anregung für den Einbau auf einer Webseite sein.

Parallax-Effekt – Was ist das?

Sicher haben Sie mal auf einer Webseite gesehen, dass beim Runterscrollen das Bild, das man gerade gesehen hat, einfach stehen bleibt. Scrollt der Nutzer herunter, bewegen sich die Elemente der Website unterschiedlich schnell oder bleiben einfach stehen. Aber besser verständlich ist es sicher, wenn wir das anhand eines kurzen Videos präsentieren:

Zweites Update: Parallax-Lösung über Bordmittel

Nach weiteren Tests war ich verwundert, dass beim Block-Editor (Gutenberg) eine Einstellung über die Eigenschaft „Hintergrund fixieren“ des Cover-Blocks nicht funktionierte. Das war auch der Grund für die CSS-Regeln unter erstes Update.

Block-Editor Cover Bild WordPress

Da mir das keine Ruhe ließ und ich mir nicht vorstellen konnte, dass das Problem bei Betatests im Block-Editor (Gutenberg) beim Cover-Block nicht aufgefallen ist, habe ich weiter recherchiert. Dabei habe ich dann in der Developer Console festgestellt, dass die folgenden Regeln ausgeführt werden:

@media (prefers-reduced-motion: reduce)
.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
background-attachment: scroll;
}
.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
background-attachment: fixed;
}

Die erste CSS-Regel @media (prefers-reduced-motion: reduce) war mir nicht bekannt. Auf der folgenden Seite habe ich die Lösung gefunden: Auf meinem (Windows-)Rechner war unter „Einstellungen> Einfacher Zugriff> Anzeige> Animationen in Windows anzeigen“ der Schalter ausgeschaltet. Nach Einschalten des Schalters funktionierte das sowohl auf iOS (mit der Eigenschaft background-attachment: scroll;) wie auch unter Windows einwandfrei . Wie man diese Regel in Bezug auf Barrierefreiheit nutzen kann, kann man in dem folgenden interessanten Beitrag nachlesen.

Insofern ist das die Lösung, die in der Regel verwendet werden sollte. Alle anderen folgenden Lösungen sind eher Notlösungen.


Erstes Update: Eine einfachere Lösung für den Parallax-Effekt

Wenn man allerdings unabhängig von den Einstellungen beim Besucher einen Parallax-Effekt erzwingen will, bleibt nur die nachfolgende Lösung übrig:

Nachdem ich weitere Tests anlässlich einer Webseite für einen Kunden durchgeführt habe, hat sich eine wesentlich einfachere Lösung ergeben:

  • Im Block-Editor (Gutenberg) wird das Bild wie gehabt als Cover-Block eingefügt.
  • Die Einstellung “Hintergrund fixiert” muss ausgeschaltet bleiben (siehe aber hier).
  • Die Höhe des Bildes kann bei den Eigenschaften des Cover-Blocks gesetzt werden.
  • Unter Erweitert > Zusätzliche CSS-Klasse(n) wird para_img eingegeben (das ist der Name für die CSS-Regel, s. u.)
  • Es ist nicht notwendig, die einzelnen Bilder bei den CSS-Regeln vorzusehen.
  • Es gibt nur noch eine CSS-Regel für alle Bilder.
  • Wegen Problemen mit iOS (Safari) ist es günstig, Media Queries vorzusehen. Das ist in der nachfolgenden Lösung ansatzweise berücksichtigt.
/* auf kleineren Displays kein Parallax wegen Problemen mit iOS*/
@media (max-width: 800px) {
    .para_img {
        background-attachment: scroll;
    }
}

/* auf größeren Displays Parallax */
@media (min-width: 801px) {
	.para_img {
		 background-attachment: fixed;
		 /* z-index:-1;
		 background-size: cover;
		 background-position: center;
		 background-size: cover; */
	}
}

Parallax – eine (erste) Lösung über CSS

Wir wären hier jetzt schnell fertig damit, wenn wir eines der unzähligen Plugins für den Parallax-Effekt nutzen. Wir wollen aber zeigen, wie wir das auch mit CSS realisieren können. Und damit spart man sich ein zusätzliches Plugin. Fangen wir also mal an.


Die nebenstehende Lösung umfasst drei Bilder, wobei wir uns auf die Einstellungen bei einem Bild beschränken.

In dem ersten Teil befinden sich die CSS-Regeln, die für alle drei Bilder gemeinsam gelten.

Der allgemeine Teil

Informationen zu den einzelnen Eigenschaften wie z. B. background-attachment: fixed; findet ihr z. B. auf der folgenden Seite. Eine Erklärung an dieser Stelle würde den Rahmen sprengen.

Mit der Eigenschaft opacity: 0.65; wird die Transparenz eingestellt. Ein Wert von eins bedeutet keinerlei Transparenz, ein Wert von null vollständige Transparenz

Einstellungen für Bild 1

Zunächst braucht man ein Bild, für den dieser Effekt eingerichtet wird. Die URL erhält man über Medien. Dort wählt man das gewünschte Bild und findet rechts die URL. Diese URL kopiert man und trägt sie bei background-image ein.

Die restlichen Angaben können je nach Bedarf geändert werden.

Wichtig ist auch hier wieder der Eintrag z-index:-1;. Der Wert -1 senkt die Priorität des Elements und sorgt dafür, dass in unserem Fall das Foto hinter das Menü oder anderen Inhalten „rutscht“, wenn man hochscrollt.

Im Beispiel sieht man noch auskommentierte Eigenschaften:

/* Verschiebung innerhalb des Containers */
	/* transform: translateZ(3px)		 
           scale(1.125); */

Wenn man die Kommentarzeichen /* (Beginn Kommentar) bzw. */ (Ende Kommentar) löscht, dann bewegt sich das Bild gegenläufig zum Inhalt und bleibt nicht „stehen“.

/*------------------------------------*/
/* Start: Parallax Scrolling Effekt
/*------------------------------------*/
.para_img-1, .para_img-2, .para_img-3 {
  position: relative;
  /* opacity: 0.65; */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*------------------------------------*/
/* Bild 1
/*------------------------------------*/
.para_img-1 {
  background-image: url("http://test.test/wp-content/uploads/2020/01/platzhalter_slider_beach-2585264_1280.jpg");
      min-height: 400px;
      z-index:-1;
      /* Verschiebung innerhalb des Containers */
      /* transform: translateZ(3px)		 
           scale(1.125); */
}
Parallax twenty twenty CSS WordPress

Analog können für weitere Bilder auch entsprechende Regeln erstellt werden.


Und wo kommt das hin?

Diese Regeln kann man bei WordPress unter Design > Customizer > Zusätzliches CSS einbauen. Eine andere Möglichkeit besteht natürlich darin, dass man die Regeln in die style.css bei Verwendung eines Childthemes schreibt.

Was halten Sie davon?

Wir hoffen, der Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Wie geht es weiter? – Ein OnePager mit Twenty Twenty

Nachdem wir im 1. Teil gezeigt haben, wie man bei Twenty Twenty ein Sticky Menue erstellen kann, werden wir in unserem nächsten Beitrag (3. Teil) beschreiben, wie man beim WordPress-Theme Twenty Twenty einen OnePager erstellen kann. Ein OnePager ist eine Webseite, die in der Regel nur aus einer Seite besteht und auf der man über das Menü die einzelnen Sprungmarken auf dieser Seite ansteuern kann. Mehr dazu im nächsten Beitrag.

Wie das dann aussehen kann, zeigen wir in dem folgenden Video. In dem Video zeigen wir noch weitere Gestaltungsoptionen, die wir mit Twenty Twenty in WordPress umgesetzt haben.


Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Infos im Blog

Mehr erfahren auf unserer Webseite

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.