i moderne internet design baggrunde er store (både bogstaveligt og billedligt). Med fremkomsten af HD (og nu 4K) skærme skaber designere baggrunde, der optager masser af skærm fast ejendom. Hvorfor? Fordi de giver en utrolig visuel effekt og hjælper med at fortælle en historie.

men der er så meget mere til baggrunde end blot at smide et foto eller tekstur i et stort rum. En kombination af CSS og den lejlighedsvise smule JavaScript styrker oprettelsen af nogle fantastiske specialeffekter.

lad os undersøge nogle af de unikke måder, hvorpå designere krydrer baggrunde. Vi inkluderer også en pen til hver teknik, så du kan se nøjagtigt, hvordan de fungerer.

CSS Blend Mode farveændring

hvad der gør denne baggrundseffekt så cool er, at det faste element øverst ser ud til at ændre farve, når brugeren ruller. Brugen af CSS mix-blend-mode egenskab giver mulighed for ændring i nuance, som er afhængig af indholdet af baggrunden.

Scrolling Animation

denne teknik, der minder om fortidens videospil, indeholder to forskellige billeder-hver ruller i den modsatte retning. Det er gjort ved hjælp af CSS transform og nogle JS.

skæv

skæve baggrunde er en af de hotteste trends inden for internetdesign. Det er en effekt, der var utrolig let at implementere i printdesign og en smerte at gøre på nettet – indtil nu. Denne rene HTML / CSS-løsning gør det til en cinch.

Moving Pictures

ved hjælp af en ret simpel bit CSS giver denne baggrund mulighed for en jævn overgang mellem flere billeder. Det giver en meget mere let skyder end traditionel JavaScript.

Animeret Gradient

Hvis det ikke gøres omhyggeligt, kan en animeret baggrund distrahere fra ethvert indhold, der sidder oven på det. Dette animerede gradienteksempel er rart, fordi det er en mere subtil effekt. Ved hjælp af JavaScript kan du definere gradientfarver, der passer til din palet.

Blur on Scroll

denne teknik kan være ret nyttig til tidspunkter, hvor du virkelig ønsker, at besøgende skal fokusere på baggrundsbilledet (som overskriften på en nyhedsartikel) og derefter give mulighed for let læsning af tekst over toppen. En lille smule spørgsmål ændrer background-size egenskaben ved rulle for at skabe effekten.

Fade-in Hero billede med Overlay

der er et par ting der foregår med dette eksempel. For det første har et heltebillede i fuld bredde et farveoverlay tilføjet ovenpå for at skabe en anden nuance. Derefter implementeres en fade-animation for at introducere billedet på en visuelt glat måde. Endelig tilføjes en parallaks-stil rulleeffekt til blandingen. Resultatet er et meget moderne look, der bruger relativt lidt kode (og ingen JS).

Baggrundsforøgelse og Pan

Her er en effekt, vi ser ganske lidt på det seneste. Når brugeren svæver over et panel, baggrundsbilledet springer ind og pander sammen med eventuelle bevægelser af markøren. Det er en nem måde at tilføje nogle interaktivitet og bevare brugernes interesse.

Reveal on Hover

dette eksempel viser en delt skærm, hvor baggrunden afsløres baseret på placeringen af brugerens mus. Fantastisk til sammenligninger, som ‘før’ og ‘efter’ skud.

farveændring på Scroll

nogle gange glemmer vi, hvor kraftig brugen af enkle solide farver kan være. Her ser vi den indflydelse, det kan gøre, når baggrundsfarver ændres baseret på rulleposition. Denne lette løsning kan være lige så visuelt effektiv som tunge billeder.

baggrunde på forkant

baggrunde er ikke længere kun et middel til at ramme indhold – de er nu ofte en del af selve indholdet. Med så mange interessante måder at udnytte dem på, er det værd at eksperimentere med forskellige baggrundsteknikker og se, hvordan de kan forbedre brugeroplevelsen af dit næste projekt.