DayTrip vietne savas lapas galvenē izmanto kārtīgu efektu, kas sagroza fona attēlu ar animētu, graudainu faktūru. Efekts ir smalks, bet rada putekļainu, retro atmosfēru.
Efekts ir ļoti smalks. Jūs varat redzēt atšķirību, kur efekts ir labajā pusē un atspējots kreisajā pusē:
Mēs varam izveidot tādu pašu zemniecisku efektu ar vienu attēlu un nedaudz CSS.
1. solis: lietu iestatīšana
Vispirms izveidosim mūsu lapas galveni. Mēs izmantosim kopēju modeli, kurā fona attēls aizņem visu vietu.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Šis ir piemērs, kā mūs sākt:
Skatiet Geoff Graham (@geoffgraham) Pen RpLKdx vietnē CodePen.
2. solis: faktūras izvēle
Tālāk mums ir nepieciešams attēls ar graudainu faktūru. To var izveidot pats. Smalkiem modeļiem ir arī vairākas jaukas iespējas, tostarp šī, kuru mēs izmantosim savai demonstrācijai. Ņemiet vērā, ka attēlam nav jābūt milzīgam. Kaut kas laukuma apkārtnē 400pxizdarīs triku.
Ideja ir tāda, ka mēs uz augšu pārklāsim graudainu tekstūru .page-header. Mēs varam izmantot :afterpseidoelementu, .page-headertāpēc nav nepieciešams izveidot citu 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; )Ņemiet vērā, ka mēs ievietots height, un widthuz pseido-elements, kā arī top, un lefttāpēc, ka tas faktiski pārsniedz robežu lapas galvenē ir vērsta uz to. Mēs vēlamies to izdarīt tā, lai graudainajam tekstūras slānim būtu vieta, kur pārvietoties, nepakļaujot lapas galvenes slāni zem tā. Tas nozīmē, ka slāņi ir sakārtoti šādi:
Tagad mums ir jauka lielas lapas galvene ar graudainu attēlu augšpusē:
Skatiet Geoff Graham (@geoffgraham) Pen evGvKg vietnē CodePen.
3. darbība: graudainā slāņa animēšana
Pēdējā lieta, kas mums jādara, ir animēt graudaino slāni. Tas ir efekts, kuru mēs izmantosim, un lapas galvenei piešķir retro, analogo pievilcību.
DayTrip vietne animācijas atslēgkadru definēšanai izmanto:
@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%) ) )Vizualizēt, ko šis kods nozīmē, ir diezgan grūti, taču tas galvenokārt virza augšējo graudaino slāni zig-zag zīmējumā. Lūk, ilustrācija tam, kā tas izskatās mazākā mērogā:
Tagad viss, kas mums jādara, ir jāpielieto atslēgkadri, .page-header:afterlai redzētu, ka tie stājas spēkā. Mēs iestatīsim animācijas atskaņošanu 8 sekundes un bezgalīgu ciklu:
.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; )Saliekot to visu kopā
Šeit ir pilns fragments ar visiem gabaliņiem. Ņemiet vērā, ka mēs pieņemam, ka visiem pārdevēju prefiksiem tiek izmantots Autoprefixer.
.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%) ) )Skatiet Geoff Graham (@geoffgraham) pildspalvveida pilnšļirces efektu vietnē CodePen.