Witryna DayTrip wykorzystuje zgrabny efekt w nagłówku strony, który zniekształca obraz tła za pomocą animowanej, ziarnistej tekstury. Efekt jest subtelny, ale tworzy zakurzony, retro klimat.
Efekt jest bardzo subtelny. Możesz zobaczyć różnicę, gdzie efekt występuje po prawej stronie i wyłączony po lewej:
Możemy stworzyć ten sam rustykalny efekt za pomocą jednego obrazu i odrobiny CSS.
Krok 1: Konfiguracja
Najpierw skonfigurujmy nagłówek naszej strony. Będziemy używać wspólnego wzoru, w którym obraz tła zajmuje całą przestrzeń.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Oto przykład, który pomoże nam zacząć:
Zobacz Pen RpLKdx autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Krok 2: Wybór tekstury
Następnie potrzebujemy obrazu z ziarnistą teksturą. Możesz to stworzyć samodzielnie. Subtle Patterns ma również wiele fajnych opcji, w tym tę, której użyjemy w naszym demo. Zwróć uwagę, że obraz nie musi być duży. Coś w sąsiedztwie 400pxplacu załatwi sprawę.
Chodzi o to, aby nałożyć ziarnistą teksturę na wierzch .page-header. Możemy użyć :afterpseudoelementu na, .page-headerwięc nie ma potrzeby tworzenia kolejnego elementu.
.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; )Zauważ, że umieściliśmy a heighti widthna pseudoelemencie oraz a topi lefttak, że faktycznie przekracza on granicę nagłówka strony i jest do niego wyśrodkowany. Chcemy to zrobić, aby warstwa z ziarnistą teksturą miała miejsce do poruszania się bez odsłaniania warstwy nagłówka strony pod spodem. Oznacza to, że warstwy są ułożone bardziej tak:
Teraz mamy ładny, duży nagłówek strony z ziarnistym obrazkiem na górze:
Zobacz Pen evGvKg autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Krok 3: Animowanie warstwy ziarnistej
Ostatnią rzeczą, którą musimy zrobić, jest animacja ziarnistej warstwy. To jest efekt, do którego dążymy i nadaje nagłówkowi strony retro, analogowy wygląd.
Witryna DayTrip używa następujących elementów do definiowania klatek kluczowych animacji:
@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%) ) )Trudno jest wyobrazić sobie, co oznacza ten kod, ale w zasadzie przesuwa górną ziarnistą warstwę w zygzakowaty wzór. Oto ilustracja tego, jak to wygląda w mniejszej skali:
Teraz wszystko, co musimy zrobić, to zastosować klatki kluczowe, .page-header:afteraby zobaczyć, jak to działa. Ustawimy animację na 8 sekund i nieskończoną pętlę:
.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; )Kładąc wszystko razem
Oto pełny fragment ze wszystkimi elementami na miejscu. Zauważ, że zakładamy użycie Autoprefixer dla wszystkich prefiksów dostawców.
.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%) ) )Zobacz Animowany ziarnisty efekt pióra autorstwa Geoffa Grahama (@geoffgraham) na CodePen.