Animierte körnige Textur

Die DayTrip-Website verwendet einen raffinierten Effekt in ihrem Seitenheader, der das Hintergrundbild mit einer animierten, körnigen Textur verzerrt. Der Effekt ist dezent, erzeugt aber eine staubige, Retro-Atmosphäre.

Der Effekt ist *sehr* dezent. Man kann den Unterschied sehen, wo der Effekt aktiv ist (rechts) und wo er deaktiviert ist (links).

Wir können denselben rustikalen Effekt mit einem einzigen Bild und etwas CSS erzeugen.

Schritt 1: Einrichtung

Zuerst richten wir den Seitenheader ein. Wir werden ein gängiges Muster verwenden, bei dem ein Hintergrundbild den gesamten Bereich einnimmt.

.page-header {
  height: 100vh;
  background-image: url("/path/to/image.jpg");
}

Hier ist ein Beispiel für den Anfang

Siehe den Pen RpLKdx von Geoff Graham (@geoffgraham) auf CodePen.

Schritt 2: Auswahl einer Textur

Als Nächstes benötigen wir ein Bild mit einer körnigen Textur. Dies können Sie selbst erstellen. Subtle Patterns bietet auch eine Reihe schöner Optionen, einschließlich dieser, die wir für unsere Demo verwenden werden. Beachten Sie, dass das Bild nicht riesig sein muss. Etwas in der Größenordnung von 400px Quadrat reicht aus.

Die Idee ist, dass wir die körnige Textur über dem .page-header überlagern. Wir können das Pseudo-Element :after auf .page-header verwenden, sodass kein zusätzliches Element erstellt werden muss.

.page-header {
  height: 100vh;
  background-image: url("/path/to/image.jpg");
}

.page-header:after {
  /* content is required when using :after */
  content: "";
  /* The grainy image */
  background-image: url("/path/to/grainy/image.jpg");
  /* Specify a height and width above and beyond the page header for movement */
  height: 300%;
  width: 300%;
  /* We're using opacity in place of a transparent image */
  opacity: 0.3;
  /* We'll need this when the animation kicks in to hold the position of the texture */
  position: fixed;
}

Beachten Sie, dass wir dem Pseudo-Element eine height und width sowie top und left zugewiesen haben, sodass es die Grenzen des Seitenheaders überschreitet und zentriert ist. Wir möchten dies tun, damit die körnige Texturschicht Platz zum Bewegen hat, ohne die darunter liegende Seitenebene freizulegen. Das bedeutet, dass unsere Ebenen eher so angeordnet sind:

Jetzt haben wir einen schönen, großen Seitenheader mit einem körnigen Bild darüber.

Siehe den Pen evGvKg von Geoff Graham (@geoffgraham) auf CodePen.

Schritt 3: Animieren der körnigen Ebene

Das Letzte, was wir tun müssen, ist, die körnige Ebene zu animieren. Dies ist der Effekt, den wir erzielen wollen und der dem Seitenheader diesen Retro-, analogen Reiz verleiht.

Die DayTrip-Site verwendet Folgendes, um die Animations-Keyframes zu definieren:

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

Es ist etwas schwierig zu visualisieren, was dieser Code bedeutet, aber er bewegt die obere körnige Ebene im Grunde in einem Zickzackmuster. Hier ist eine Veranschaulichung, wie das in kleinerem Maßstab aussieht:

Jetzt müssen wir nur noch die Keyframes auf .page-header:after anwenden, um sie wirksam werden zu lassen. Wir stellen die Animation so ein, dass sie 8 Sekunden lang abgespielt wird und unendlich läuft.

.page-header:after {
  /* content is required when using :after */
  content: "";
  /* The animation */
  animation: grain 8s steps(10) infinite;
  /* The grainy image */
  background-image: url("/path/to/grainy/image.jpg");
  /* Specify a height and width above and beyond the page header for movement */
  height: 300%;
  width: 300%;
  /* We're using opacity in place of a transparent image */
  opacity: 0.3;
  /* We'll need this when the animation kicks in to hold the position of the texture */
  position: fixed;
}

Alles zusammenfügen

Hier ist der vollständige Schnipsel mit allen Teilen. Beachten Sie, dass wir die Verwendung von Autoprefixer für alle Vendor-Präfixe annehmen.

.page-header {
  height: 100vh;
  background-image: url("/path/to/image.jpg");
}

.page-header:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("/path/to/grainy/image.jpg");
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.3;
  position: fixed;
  top: -100%;
  width: 300%;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

Siehe den Pen Animated Grainy Effect von Geoff Graham (@geoffgraham) auf CodePen.