DayTrip-verkkosivusto käyttää sivun otsikossa siistiä vaikutusta, joka vääristää taustakuvan animoidulla, rakeisella tekstuurilla. Vaikutus on hienovarainen, mutta luo pölyisen, retro-tunnelman.
Vaikutus on hyvin hienovarainen. Näet eron, missä vaikutus on paikallaan oikealla ja poissa käytöstä vasemmalla:
Voimme luoda saman maalaismaisen vaikutuksen yhdellä kuvalla ja hieman CSS: llä.
Vaihe 1: Asettelu
Ensinnäkin, määritetään sivun otsikko. Aiomme käyttää yhteistä mallia, jossa taustakuva vie koko tilan.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Tässä on esimerkki, jolla pääset alkuun:
Katso Geoff Grahamin (@geoffgraham) kynä Pen RpLKdx CodePenistä.
Vaihe 2: Rakenteen valitseminen
Seuraavaksi tarvitsemme kuvan, jossa on rakeinen rakenne. Voit luoda tämän itse. Hienoilla kuvioilla on myös useita mukavia vaihtoehtoja, mukaan lukien tämä, jota käytämme esittelyssä. Huomaa, että kuvan ei tarvitse olla valtava. Jotain 400pxneliön naapurustossa tekee temppu.
Ajatuksena on, että peitämme rakeisen tekstuurin .page-header. Voimme käyttää :afterpseudoelementtiä päällä, .page-headerjoten uutta elementtiä ei tarvitse luoda.
.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; )Huomaa, että sijoitimme heightsekä widthpseudoelementtiin että a -merkkiin topja leftniin, että se todella ylittää sivun otsikon rajan ja on sen keskellä. Haluamme tehdä tämän niin, että rakeisella tekstuurikerroksella on tilaa liikkua paljastamatta sivun otsikkokerrosta sen alla. Tämä tarkoittaa, että kerrokset on järjestetty seuraavasti:
Nyt meillä on mukava ison sivun otsikko, jonka päällä on rakeinen kuva:
Katso Geoff Grahamin (@geoffgraham) kynä evGvKg CodePenistä.
Vaihe 3: Animoi rakeinen kerros
Viimeinen asia, joka meidän on tehtävä, on animoida rakeinen kerros. Tätä seuraamme ja annamme sivun ylätunnisteelle retro-analogisen valituksen.
DayTrip-sivusto käyttää animaatioavainkehyksiä seuraavasti:
@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%) ) )On tavallaan vaikeaa visualisoida, mitä koodi tarkoittaa, mutta pohjimmiltaan se siirtää ylemmän rakeisen kerroksen siksak-kuviona. Tässä on esimerkki siitä, miltä se näyttää pienemmässä mittakaavassa:
Nyt meidän on vain sovellettava avainkehykset, .page-header:afterjotta ne tulevat voimaan. Asetamme animaation toistettavaksi 8 sekunniksi ja jatkamaan loputtomasti:
.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; )Yhdistämällä kaikki yhdessä
Tässä on koko katkelma, jossa kaikki kappaleet ovat paikallaan. Huomaa, että oletamme Autoprefixerin käytön kaikissa toimittajien etuliitteissä.
.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%) ) )Katso Geoff Grahamin (@geoffgraham) Pen Animated Grainy Effect CodePen -palvelusta.