Spletno mesto DayTrip uporablja gladek učinek na glavi strani, ki popači sliko v ozadju z animirano, zrnato teksturo. Učinek je nežen, toda ustvarja prašno, retro vibracijo.
Učinek je zelo prefinjen. Razliko vidite, kje je učinek na desni in onemogočen na levi:
Isti rustikalni učinek lahko ustvarimo z eno samo sliko in malo CSS-ja.
1. korak: Nastavitev stvari
Najprej nastavimo glavo naše strani. Uporabili bomo običajni vzorec, kjer slika v ozadju zavzame ves prostor.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Tukaj je primer za začetek:
Oglejte si Pen RpLKdx, avtorja Geoff Graham (@geoffgraham) na CodePen.
2. korak: Izbira teksture
Nato potrebujemo sliko z zrnato teksturo. To lahko ustvarite sami. Subtilni vzorci imajo tudi številne lepe možnosti, vključno s to, ki jo bomo uporabili za našo predstavitev. Upoštevajte, da slike ni treba ogromno. Nekaj v soseščini 400pxkvadrata bo naredilo trik.
Ideja je, da bomo zrnat teksturo prekrili na vrhu .page-header. Lahko uporabljamo :afterpsevdo-element, .page-headerzato ni treba ustvariti drugega elementa.
.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; )Upoštevajte, da smo ga dali heightin widthna psevdoelementa kot tudi top, in lefttako, da je dejansko presega meje v glavi strani in je osredotočen na to. To želimo narediti tako, da se ima zrnasta teksturna plast prostora za premikanje, ne da bi spodaj razkrila plast glave strani. To pomeni, da so sloji razporejeni bolj tako:
Zdaj imamo lepo glavo velike strani z zrnato sliko na vrhu:
Oglejte si Pen evGvKg, avtorja Geoff Graham (@geoffgraham) na CodePen.
3. korak: Animiranje zrnate plasti
Zadnja stvar, ki jo moramo storiti, je animiranje zrnate plasti. To je učinek, ki si ga prizadevamo in daje glavi strani tisto retro, analogno privlačnost.
Spletno mesto DayTrip za definiranje ključnih okvirjev animacije uporablja naslednje:
@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%) ) )Nekako težko si je predstavljati, kaj ta koda pomeni, vendar v bistvu premika zgornjo zrnato plast v cik-cak vzorcu. Tu je ponazoritev, kako to izgleda v manjšem obsegu:
Zdaj moramo le še uporabiti ključne okvire, da .page-header:afterbomo lahko začeli veljati. Animacijo bomo nastavili tako, da se predvaja za 8 sekund in se bo neskončno zankala:
.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; )Vse skupaj
Tu je celoten delček z vsemi kosi na mestu. Upoštevajte, da predvidevamo uporabo funkcije Autoprefixer za vse predpone ponudnikov.
.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%) ) )Oglejte si Pen Animated Grainy Effect avtorja Geoff Graham (@geoffgraham) na CodePen.