„DayTrip“ svetainė savo puslapio antraštėje naudoja tvarkingą efektą, kuris iškraipo fono vaizdą animuota, grūdėta tekstūra. Poveikis yra subtilus, tačiau sukuria dulkėtą, retro atmosferą.
Poveikis yra labai subtilus. Galite pamatyti skirtumą, kai efektas yra dešinėje ir išjungtas kairėje:
Mes galime sukurti tą patį kaimišką efektą su vienu vaizdu ir trupučiu CSS.
1 žingsnis: dalykų nustatymas
Pirmiausia nustatykime mūsų puslapio antraštę. Mes naudosime bendrą modelį, kai fono paveikslėlis užima visą erdvę.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Štai pavyzdys, kaip pradėti dirbti:
Žr. Geoffo Grahamo (@geoffgraham) „Pen RpLKdx“ „CodePen“.
2 žingsnis: tekstūros pasirinkimas
Tada mums reikia vaizdo su grūdėta tekstūra. Tai galite sukurti patys. „Subtilūs modeliai“ taip pat turi keletą puikių variantų, įskaitant šį variantą, kurį naudosime demonstracinei versijai. Atkreipkite dėmesį, kad vaizdas neturi būti didžiulis. Kažkas aikštės kaimynystėje 400pxpadarys triuką.
Idėja yra tai, kad mes uždengsime grūdėtą tekstūrą ant .page-header. Mes galime naudoti :afterpseudo elementą, .page-headertodėl nereikia kurti kito elemento.
.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; )Atkreipkite dėmesį, kad mes dedamas heightir widthant pseudo-elementas, taip pat topir lefttodėl, kad ji iš tikrųjų viršija puslapio antraštės ribą ir orientuota į jį. Mes norime tai padaryti taip, kad grūdėtas tekstūros sluoksnis turėtų erdvę judėti neatskleidžiant po juo esančio puslapio antraštės sluoksnio. Tai reiškia, kad sluoksniai yra išdėstyti taip:
Dabar turime gražią didelio puslapio antraštę su grubiu vaizdu viršuje:
Žr. Geoffo Grahamo (@geoffgraham) „Pen evGvKg“ „CodePen“.
3 žingsnis: Animuoti grūdėtą sluoksnį
Paskutinis dalykas, kurį turime padaryti, yra animuoti grūdėtą sluoksnį. Tai yra efektas, kurio mes siekiame, ir suteikia puslapio antraštei tą retro, analogišką patrauklumą.
„DayTrip“ svetainė naudoja šiuos veiksmus, kad apibrėžtų animacijos pagrindinius kadrus:
@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%) ) )Kažkaip sunku įsivaizduoti, ką reiškia tas kodas, tačiau iš esmės viršutinis grūdėtas sluoksnis juda zig-zag modeliu. Štai iliustracija, kaip tai atrodo mažesniu mastu:
Dabar mums tereikia pritaikyti pagrindinius kadrus, .page-header:afterkad jie įsigaliotų. Nustatysime, kad animacija grotų 8 sekundes ir suktųsi be galo:
.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; )Sudėjus viską kartu
Čia yra visas fragmentas su visais gabalais. Atkreipkite dėmesį, kad mes darome prielaidą, kad „Autoprefixer“ bus naudojamas visiems tiekėjo priešdėliams.
.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%) ) )Žr. Geoffo Grahamo (@geoffgraham) „Pen Animated Grainy Effect“ iš „CodePen“.