i modern webbdesign bakgrunder är stora (både bokstavligt och bildligt). Med tillkomsten av HD (och nu 4K) skärmar skapar designers bakgrunder som tar upp massor av skärmfastigheter. Varför? Eftersom de ger en otrolig visuell inverkan och hjälper till att berätta en historia.

men det finns så mycket mer att bakgrunder än att bara kasta ett foto eller textur i ett stort utrymme. En kombination av CSS och enstaka bit JavaScript Driver skapandet av några fantastiska specialeffekter.

låt oss utforska några av de unika sätten på vilka designers kryddar bakgrunder. Vi inkluderar också en penna för varje teknik så att du kan se exakt hur de fungerar.

CSS Blend Mode Color Change

det som gör denna bakgrundseffekt så cool är att det fasta elementet på toppen verkar ändra färg när användaren rullar. Användningen av CSS mix-blend-mode egenskapen tillåter förändring i nyans, vilket är beroende av innehållet i bakgrunden.

Scrolling Animation

påminner om sido-scroll videospel från det förflutna, har denna teknik två distinkta bilder – varje rullning i motsatt riktning. Det görs med hjälp av CSS transform och några JS.

Skewed

Skewed bakgrunder är en av de hetaste trenderna inom webbdesign. Det är en effekt som var otroligt lätt att implementera i tryckdesign och en smärta att göra på webben – tills nu. Denna rena HTML / CSS-lösning gör det till en cinch.

rörliga bilder

med en ganska enkel bit CSS möjliggör denna bakgrund en smidig övergång mellan flera bilder. Det ger en mycket lättare reglage än traditionell JavaScript.

animerad Gradient

om det inte görs noggrant kan en animerad bakgrund distrahera från innehåll som sitter ovanpå den. Detta animerade gradientexempel är trevligt eftersom det är en mer subtil effekt. Med JavaScript kan du definiera gradientfärger som matchar din palett.

Blur on Scroll

denna teknik kan vara ganska användbar för tider när du verkligen vill att besökare ska fokusera på bakgrundsbilden (som rubriken på en nyhetsartikel) och sedan tillåta enkel läsning av text över toppen. En liten bit av jQuery ändrar egenskapen background-size när du bläddrar för att skapa effekten.

Fade-In hjälte bild med Overlay

det finns några saker som händer med detta exempel. Först har en helbreddshjältebild ett färgöverlägg tillagt på toppen för att skapa en annan nyans. Sedan implementeras en fade animation för att introducera bilden på ett visuellt smidigt sätt. Slutligen läggs en parallax-stil rullningseffekt till mixen. Resultatet är ett mycket modernt utseende som använder relativt liten kod (och ingen JS).

Bakgrundszoom och Pan

här är en effekt vi ser ganska lite nyligen. När användaren svävar över en panel zoomar bakgrundsbilden in och panorerar tillsammans med alla rörelser på markören. Det är ett enkelt sätt att lägga till lite interaktivitet och behålla användarnas intresse.

Reveal på Hover

detta exempel visar en delad skärm där bakgrunden avslöjas baserat på användarens musposition. Perfekt för jämförelser, som ’före ’ och’ efter ’ skott.

färgförändring vid rullning

ibland glömmer vi hur kraftfull användningen av enkla solida färger kan vara. Här ser vi vilken inverkan det kan göra när bakgrundsfärger ändras baserat på rullningsposition. Denna lätta lösning kan vara lika visuellt effektiv som tunga bilder.

bakgrunder i framkant

bakgrunder är inte längre bara ett sätt att rama in innehåll – de är nu ofta en del av själva innehållet. Med så många intressanta sätt att använda dem är det värt att experimentera med olika bakgrundstekniker och se hur de kan förbättra användarupplevelsen för ditt nästa projekt.