nykyaikaisissa web design-taustoissa, ovat suuria (sekä kirjaimellisesti että kuvaannollisesti). HD-näyttöjen (ja nyt 4K-näyttöjen) myötä suunnittelijat luovat taustoja, jotka vievät paljon näytön kiinteistöjä. Miksi? Koska ne tekevät uskomattoman visuaalisen vaikutuksen ja auttavat kertomaan tarinan.

taustoissa on kuitenkin niin paljon muutakin kuin vain valokuvan tai tekstuurin heittäminen suureen tilaan. Yhdistelmä CSS ja satunnaisesti vähän JavaScript valta luominen hämmästyttäviä erikoistehosteita.

Tutkitaanpa joitakin ainutlaatuisia tapoja, joilla suunnittelijat maustavat taustoja. Otamme mukaan myös kynän jokaista tekniikkaa varten, jotta näet tarkalleen, miten ne toimivat.

CSS sekoitustilan värinmuutos

tämän taustaefektin tekee niin siistiksi se, että päällä oleva kiinteä elementti näyttää vaihtavan väriä käyttäjän vierittäessä. CSS: n käyttö mix-blend-mode ominaisuus mahdollistaa värisävyn muutoksen, joka riippuu taustan sisällöstä.

Vieritysanimaatio

muistuttaa takavuosien sivukääröisiä videopelejä, ja tekniikassa on kaksi erillistä kuvaa-kumpikin vieritetään vastakkaiseen suuntaan. Se on tehty css: n transform ja joidenkin JS: n avulla.

Skewed

Skewed backgrounds on yksi web-muotoilun kuumimmista trendeistä. Se on efekti, joka oli uskomattoman helppo toteuttaa printtisuunnittelussa ja jota oli vaikea tehdä verkossa – tähän asti. Tämä puhdas HTML/CSS ratkaisu tekee siitä helppoa.

liikkuvat kuvat

käyttämällä melko yksinkertaista CSS-bittiä tämä tausta mahdollistaa sujuvan siirtymisen useiden kuvien välillä. Se tekee paljon kevyempi liukusäädintä kuin perinteinen JavaScript.

Animaatiogradientti

jos sitä ei tehdä huolellisesti, animoitu tausta voi häiritä kaikkea sen päällä olevaa sisältöä. Tämä animoitu kaltevuus esimerkki on mukava, koska se on hienovaraisempi vaikutus. JavaScriptin avulla voit määritellä gradienttivärit vastaamaan palettiasi.

Sumenna vieritystä

tämä tekniikka voisi olla varsin hyödyllinen silloin, kun todella haluat vierailijoiden keskittyvän taustakuvaan (kuten uutisartikkelin otsikkoon) ja mahdollistavan sitten tekstin helpon lukemisen päälle. Hieman jQuery muuttaa background-size ominaisuutta vieritettäessä efektin luomiseksi.

Fade-In Hero Image with Overlay

tässä esimerkissä tapahtuu muutamia asioita. Ensinnäkin täysleveän sankarikuvan päälle on lisätty väripeitto, joka luo erilaisen sävyn. Sitten toteutetaan fade-animaatio, jolla kuva esitellään visuaalisesti sulavasti. Lopuksi Parallax-tyylinen vieritysefekti lisätään miksaukseen. Tuloksena on hyvin moderni ulkoasu, joka käyttää suhteellisen vähän koodia (eikä JS).

Tausta Zoom ja Pan

tässä on efekti, jota näemme aika paljon viime aikoina. Kun käyttäjä leijuu paneelin päällä, taustakuva zoomaa sisään ja kiertää kursorin liikkeitä. Se on helppo tapa lisätä interaktiivisuutta ja ylläpitää käyttäjien kiinnostusta.

Reveal on Hover

Tämä esimerkki näyttää jaetun näytön, jossa tausta paljastuu käyttäjän hiiren sijainnin perusteella. Suuri vertailuja, kuten ”ennen” ja ”jälkeen” laukausta.

värinmuutos Vierityksessä

joskus unohdamme, kuinka voimakas yksinkertaisten yksiväristen värien käyttö voi olla. Tässä näemme vaikutuksen, jonka se voi tehdä, kun taustavärit muuttuvat vierityspaikan perusteella. Tämä kevyt ratkaisu voi olla yhtä visuaalisesti tehokas kuin raskas kuvasto.

taustat eturintamassa

taustat eivät ole enää vain keino kehystää sisältöä – ne ovat nykyään usein osa itse sisältöä. Koska niitä voi hyödyntää niin monella mielenkiintoisella tavalla, kannattaa kokeilla erilaisia taustatekniikoita ja katsoa, miten ne voivat parantaa seuraavan projektin käyttökokemusta.