Die DayTrip-Website verwendet einen übersichtlichen Effekt in ihrem Seitenkopf, der das Hintergrundbild mit einer animierten, körnigen Textur verzerrt. Der Effekt ist subtil, erzeugt aber eine staubige Retro-Atmosphäre.
Der Effekt ist sehr subtil. Sie können den Unterschied sehen, wo der Effekt rechts vorhanden und links deaktiviert ist:
Wir können den gleichen rustikalen Effekt mit einem einzelnen Bild und ein wenig CSS erzielen.
Schritt 1: Einrichten
Lassen Sie uns zuerst den Header unserer Seite einrichten. Wir werden ein allgemeines Muster verwenden, bei dem ein Hintergrundbild den gesamten Raum einnimmt.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Hier ist ein Beispiel, um uns den Einstieg zu erleichtern:
Siehe den Stift RpLKdx von Geoff Graham (@geoffgraham) auf CodePen.
Schritt 2: Auswählen einer Textur
Als nächstes brauchen wir ein Bild mit einer körnigen Textur. Sie können dies selbst erstellen. Subtile Muster haben auch eine Reihe von netten Optionen, einschließlich dieser, die wir für unsere Demo verwenden werden. Beachten Sie, dass das Bild nicht sehr groß sein muss. Etwas in der Nähe des 400pxPlatzes wird den Trick tun.
Die Idee ist, dass wir die körnige Textur darüber legen .page-header. Wir können das :afterPseudoelement für verwenden, .page-headersodass kein weiteres Element erstellt werden muss.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* 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 ein heightund widthauf dem Pseudoelement sowie ein topund platziert haben, leftsodass es tatsächlich die Grenze des Seitenkopfs überschreitet und darauf zentriert ist. Wir möchten dies tun, damit sich die körnige Texturebene bewegen kann, ohne die darunter liegende Seitenkopf-Ebene freizulegen. Dies bedeutet, dass Ebenen eher so angeordnet sind:
Jetzt haben wir einen schönen großen Seitenkopf mit einem körnigen Bild oben:
Siehe den Stift evGvKg von Geoff Graham (@geoffgraham) auf CodePen.
Schritt 3: Animieren der körnigen Ebene
Als letztes müssen wir die körnige Schicht animieren. Dies ist der Effekt, den wir anstreben und der dem Seitenkopf den Retro-Analog-Reiz verleiht.
Die DayTrip-Site definiert die Animations-Keyframes wie folgt:
@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 schwierig zu visualisieren, was dieser Code bedeutet, aber im Grunde bewegt er die oberste körnige Ebene in einem Zick-Zack-Muster. Hier ist ein Beispiel dafür, wie das in kleinerem Maßstab aussieht:
Jetzt müssen wir nur noch die Keyframes anwenden, .page-header:afterdamit sie wirksam werden. Wir werden die Animation so einstellen, dass sie 8 Sekunden lang abgespielt wird und eine Endlosschleife abschließt:
.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.webp"); /* 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 Ausschnitt mit allen Teilen. Beachten Sie, dass wir die Verwendung von Autoprefixer für alle Herstellerpräfixe annehmen.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); 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%) ) )Sehen Sie den Pen Animated Grainy Effect von Geoff Graham (@geoffgraham) auf CodePen.