i moderne webdesign bakgrunner er store (både bokstavelig og billedlig). MED fremkomsten AV HD (OG NÅ 4K) skjermer, skaper designere bakgrunner som tar opp masse skjerm fast eiendom. Hvorfor? Fordi de gir en utrolig visuell innvirkning og bidrar til å fortelle en historie.

men det er så mye mer til bakgrunner enn bare å kaste et bilde eller tekstur inn i en stor plass. EN kombinasjon AV CSS og en og annen Bit Av JavaScript makt etableringen av noen fantastiske spesialeffekter.

la oss utforske noen av de unike måtene som designere spiser opp bakgrunner. Vi vil også inkludere en penn for hver teknikk slik at du kan se nøyaktig hvordan de fungerer.

CSS Blend Mode Color Change

Det som gjør denne bakgrunnseffekten så kul er at det faste elementet på toppen ser ut til å endre farge når brukeren ruller. BRUKEN av CSSmix-blend-mode egenskapen tillater endring i hue, som er avhengig av innholdet i bakgrunnen.

Rulle Animasjon

Minner om side-scroll videospill fra fortiden, denne teknikken har to forskjellige bilder – hver ruller i motsatt retning. DET er gjort ved HJELP av CSS transform og noen JS.

Skjev

Skjev bakgrunn er en av de hotteste trendene i webdesign. Det er en effekt som var utrolig enkel å implementere i utskriftsdesign og en smerte å gjøre på nettet-til nå. Denne rene HTML / CSS-løsningen gjør det enkelt.

Flytte Bilder

Ved hjelp av en ganske enkel BIT AV CSS, gir denne bakgrunnen en jevn overgang mellom flere bilder. Det gir en mye mer lett glidebryter enn tradisjonell JavaScript.

Animert Gradient

hvis ikke gjort nøye, kan en animert bakgrunn distrahere fra innhold som sitter på toppen av det. Dette animerte gradienteksemplet er fint fordi det er en mer subtil effekt. Ved Hjelp Av JavaScript kan du definere gradientfarger som passer til paletten din.Denne teknikken kan være ganske nyttig for tider når du virkelig vil at besøkende skal fokusere på bakgrunnsbildet (som overskriften til en nyhetsartikkel) og deretter tillate enkel lesing av tekst over toppen. En liten bit av jQuery endrerbackground-size egenskapen ved å bla for å skape effekten.

Fade-In Hero Bilde med Overlegg

Det er et par ting som skjer med dette eksemplet. Først har et fullbreddeheltbilde et fargeoverlegg lagt til på toppen for å skape en annen nyanse. Deretter implementeres en fade animasjon for å introdusere bildet på en visuelt jevn måte. Til slutt, en parallax-stil rulling effekt er lagt til mix. Resultatet er et veldig moderne utseende som bruker relativt lite kode (og ingen JS).

Bakgrunnszoom og Pan

her er en effekt vi ser ganske mye i det siste. Som brukeren svever over et panel, zoomer bakgrunnsbildet inn og panner sammen med noen bevegelser av markøren. Det er en enkel måte å legge til litt interaktivitet og opprettholde brukerinteresse.

Avslør På Hover

dette eksemplet viser en delt skjerm hvor bakgrunnen avsløres basert på brukerens muses posisjon. Flott for sammenligninger, som ‘før’ og ‘etter’ skudd.

Fargeendring på Rulle

noen ganger glemmer vi hvor kraftig bruken av enkle solide farger kan være. Her ser vi effekten det kan gjøre som bakgrunnsfarger endres basert på rulleposisjon. Denne lette løsningen kan være like visuelt effektiv som tunge bilder.

Bakgrunner i Forkant

Bakgrunner er ikke lenger bare et middel til å ramme inn innhold – de er nå ofte en del av selve innholdet. Med så mange interessante måter å utnytte dem på, er det verdt å eksperimentere med ulike bakgrunnsteknikker og se hvordan de kan forbedre brukeropplevelsen til ditt neste prosjekt.