Parallax twenty twenty CSS WordPress

Twenty Twenty: Parallax-Effekt

2. Teil: Twenty Twenty mit Parallax-Effekt

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.

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:

Parallax – eine 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.