DayTripi veebisait kasutab oma lehe päises korralikku efekti, mis moonutab taustapilti animeeritud, teralise tekstuuriga. Efekt on peen, kuid loob tolmuse, retrohõngu.
Mõju on väga peen. Näete erinevust, kus efekt on paigas paremal ja keelatud vasakul:
Saame luua sama maalähedase efekti ühe pildi ja natuke CSS-i abil.
1. samm: asjade seadistamine
Kõigepealt seadistame oma lehe päise. Kasutame ühist mustrit, kus taustapilt võtab kogu ruumi.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Siin on näide meie alustamiseks:
Vaadake CodePenilt Geoff Graham'i (@geoffgraham) Pen RpLKdx.
2. samm: tekstuuri valimine
Järgmiseks vajame sellele teralise tekstuuriga pilti. Selle saate ise luua. Subtle Patternsil on ka mitmeid toredaid võimalusi, sealhulgas see, mida me oma demo jaoks kasutame. Pange tähele, et pilt ei pea olema tohutu. Midagi 400pxruudu naabruses teeb asja ära.
Idee on selles, et katame teralise tekstuuri peal .page-header. Saame kasutada :afterpseudoelementi, .page-headernii et pole vaja uut elementi luua.
.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; )Pange tähele, et panime heightja widthEuroopa pseudo-element samuti topja leftnii, et see tegelikult ületab piiri lehe päise ja on keskendunud sellele. Soovime seda teha nii, et teralisel tekstuurikihil oleks ruumi liikumiseks ilma altpoolt lehe päise kihti paljastamata. See tähendab, et kihid on paigutatud rohkem järgmiselt:
Nüüd on meil kena suure lehe päis, mille peal on teraline pilt:
Vaadake CodePenilt Geoff Graham'i (@geoffgraham) Pen evGvKg.
3. samm: teralise kihi animeerimine
Viimane asi, mida peame tegema, on animeerida teraline kiht. See on efekt, mida me järgime, ja annab lehe päisele selle retro-analoogse kaebuse.
DayTripi sait kasutab animatsiooni võtmekaadrite määratlemiseks järgmist:
@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%) ) )Selle koodi tähenduse visualiseerimine on omamoodi keeruline, kuid põhimõtteliselt liigutab see ülemist teralist kihti siksakiliselt. Siin on näide sellest, kuidas see väiksemas mahus välja näeb:
Nüüd peame vaid rakendama võtmekaadreid, .page-header:afteret need jõustuksid. Seadistame animatsiooni 8 sekundiks esitamiseks ja lõpmatuks:
.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õike kokku panema
Siin on täielik jupp koos kõigi tükkidega paigas. Pange tähele, et eeldame, et kõigi tarnijate eesliidete jaoks kasutatakse Autoprefixerit.
.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%) ) )Vaadake CodePenil Geoff Grahami (@geoffgraham) pliiatsi animeeritud teralist efekti.