în medii moderne de design web sunt mari (atât la propriu și la figurat). Odată cu apariția afișajelor HD (și acum 4K), designerii creează fundaluri care ocupă o mulțime de proprietăți imobiliare pe ecran. De ce? Pentru că ei fac pentru un impact vizual incredibil și de a ajuta pentru a spune o poveste.

dar există mult mai mult pentru fundaluri decât pur și simplu aruncarea unei fotografii sau a unei texturi într-un spațiu mare. O combinație de CSS și bit ocazional de putere JavaScript crearea unor efecte speciale uimitoare.

să explorăm câteva dintre modurile unice în care designerii sunt spicing fundaluri. Vom include, de asemenea, un stilou pentru fiecare tehnică, astfel încât să puteți vedea exact cum funcționează.

CSS Blend Mode schimbare de culoare

ceea ce face ca acest efect de fundal atât de cool este faptul că elementul fix pe partea de sus pare să schimbe culoarea ca sulurile de utilizator. Utilizarea CSS mix-blend-mode proprietatea permite schimbarea nuanței, care depinde de conținutul fundalului.

defilare animație

amintind de side-scroll jocuri video din trecut, această tehnică are două imagini distincte – fiecare defilare în direcția opusă. Se face cu ajutorul CSS transform și unele JS.

oblice

fundaluri oblice sunt una dintre cele mai tari tendințe în Web design. Este un efect care a fost incredibil de ușor de implementat în designul de imprimare și o durere de făcut pe web – până acum. Această soluție pură HTML / CSS face o floare la ureche.

imagini în mișcare

folosind un pic destul de simplu de CSS, acest fundal permite o tranziție lină între mai multe imagini. Se face pentru un slider mult mai ușor decât JavaScript tradiționale.

Gradient animat

dacă nu este făcut cu atenție, un fundal animat poate distrage atenția de la orice conținut așezat deasupra acestuia. Acest exemplu de gradient animat este frumos, deoarece este un efect mai subtil. Folosind JavaScript, puteți defini culorile gradientului pentru a se potrivi cu paleta dvs.

Blur on Scroll

această tehnică ar putea fi destul de utilă pentru momentele în care doriți cu adevărat ca vizitatorii să se concentreze pe imaginea de fundal (cum ar fi antetul unui articol de știri) și apoi să permită citirea ușoară a textului deasupra. Un pic de jQuery schimbă background-size proprietate pe defilare pentru a crea efectul.

Fade-in imagine erou cu suprapunere

există câteva lucruri se întâmplă cu acest exemplu. În primul rând, o imagine de erou cu lățime completă are o suprapunere de culoare adăugată deasupra pentru a crea o nuanță diferită. Apoi, o animație fade este implementată pentru a introduce imaginea într-un mod vizual neted. În cele din urmă, la mix se adaugă un efect de defilare în stil paralaxă. Rezultatul este un aspect foarte modern, care folosește un cod relativ mic (și fără JS).

Background Zoom și Pan

Iată un efect pe care îl vedem destul de puțin în ultima vreme. Pe măsură ce utilizatorul planează peste un panou, imaginea de fundal se mărește și se rotește împreună cu orice mișcare a cursorului. Este o modalitate ușoară de a adăuga o anumită interactivitate și de a menține interesul utilizatorilor.

Reveal on Hover

acest exemplu arată un ecran divizat în care fundalul este dezvăluit pe baza poziției mouse-ului utilizatorului. Mare pentru comparații, cum ar fi ‘înainte’ și ‘după’ fotografii.

schimbarea culorii pe defilare

uneori uităm cât de puternică poate fi utilizarea culorilor solide simple. Aici, vedem impactul pe care îl poate face pe măsură ce culorile de fundal se schimbă în funcție de poziția de derulare. Această soluție ușoară poate fi la fel de eficientă din punct de vedere vizual ca și imaginile grele.fundalurile

în prim plan

fundalurile nu mai sunt doar un mijloc de încadrare a conținutului – acum fac parte adesea din conținutul în sine. Cu atât de multe moduri interesante de a le utiliza, merită să experimentați diverse tehnici de fundal și să vedeți cum pot îmbunătăți experiența utilizatorului următorului dvs. proiect.