Vi tænker ofte på baggrundsbilleder som tekstur eller noget, der giver kontrast til læseligt indhold - med andre ord, ikke rigtig indhold. Hvis det var tilfreds, ville du sandsynligvis nå en <img>
i hvert fald, tilgængelighed og hvad der ikke sker.
Men der er tidspunkter, hvor position or skala af et baggrundsbillede kan sidde et sted mellem polerne for indhold og dekoration. Konteksten er konge, ikke? Hvis vi ændrer baggrundsbilledets placering, kan det formidle lidt mere kontekst eller oplevelse.
Hvordan det? Lad os se på et par eksempler, jeg har set flyde rundt.
Når vi kommer i gang, vil jeg advare om, at der er en fin linje i disse demoer mellem billeder, der bruges til dekoration, og billeder, der bruges som indhold. Forskellen har implikationer for tilgængelighed, hvor baggrunde ikke annonceres til skærmlæsere. Hvis dit billede virkelig er et billede, så måske overveje en <img>
tag med korrekt alt
tekst. Og mens vi taler tilgængelighed, er det en god idé at overveje en brugers bevægelsespræferencer også.
Vis mig mere!
Chris Coyier har denne fine lille demo fra flere år tilbage.
Demoen er super praktisk på mange måder, fordi det er en smart tilgang til at vise annoncer i indhold. Du har salgsargumentet og et lokkende billede til at supplere det.
Den store begrænsning for de fleste annoncer, vil jeg satse på, er den begrænsede ejendom. Jeg ved ikke, om du nogensinde har været nødt til at slippe en annonce ind på en side, men jeg har og beder typisk annoncøren om et billede, der opfylder nøjagtige pixeldimensioner, så aktivet passer til rummet.
Men Chriss demo afhjælper pladsproblemet. Hold musen over billedet og se det både bevæge sig og skalere. Brugeren får faktisk mere kontekst for produktet, end de ville have, da billedet var i sin oprindelige position. Det er en win-win, ikke? Annoncøren får skabt et iøjnefaldende billede uden at gå på kompromis med konteksten. I mellemtiden får brugeren lidt ekstra værdi fra de nyligt afslørede dele af billedet.
Hvis du kigger på demoens markering, vil du bemærke, at det stort set er, hvad du ville forvente. Her er en forkortet version:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
Vi kunne nok skændes lidt over semantikken, men det er ikke meningen. Vi har en container med tilslutning <div>
for baggrundsbilledet og en anden <div>
at holde indholdet.
Hvad angår styling, er de vigtige dele her:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
Ikke dårligt, vel? Vi giver beholderen nogle dimensioner og sætter et baggrundsbillede på den, der ikke gentager sig og er placeret ved dens nederste venstre kant.
Det virkelige trick er med JavaScript. Vi vil bruge det til at få musepositionen og beholderens offset, og derefter konvertere denne værdi til en passende skala for at indstille background-position
. Lad os først lytte efter musebevægelser på .container
element:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
Herfra kan vi bruge containerens offsetX
, offsetY
ejendomme. Men vi vil ikke bruge disse værdier direkte, da værdien for X-koordinaten er mindre end hvad vi har brug for, og Y-koordinaten er større. Vi bliver nødt til at lege lidt for at finde en konstant, som vi kan bruge som multiplikator.
Det er lidt touch-and-feel, men det har jeg fundet ud af 1.32
, 0.455
fungerer perfekt til henholdsvis X- og Y-koordinaterne. Vi multiplicerer forskydningerne med disse værdier, tilføj a px
enhed på resultatet, og anvend den derefter på background-position
værdier.
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
Endelig kan vi også nulstille baggrundspositionerne tilbage til originalen, hvis brugeren forlader billedbeholderen.
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
Da vi er på CSS-Tricks, vil jeg tilbyde, at vi kunne have lavet en meget billigere version af dette med en lille svæveovergang i vanilla CSS:
Mal et større billede
Ingen tvivl om, at du har været i en online tøjbutik eller hvad som helst og stødt på den gamle zoom-på-hover-funktion.
Dette mønster har eksisteret i, hvad der føles som for evigt (Dylan Winn-Brown delte sin tilgang tilbage i 2016), men det er kun et bevis (håber jeg) på dets anvendelighed. Brugeren får mere kontekst, når de zoomer ind og får en bedre idé om en sweaters syning eller hvad har du.
Der er to dele til dette: container og lup. Beholderen er det eneste, vi har brug for i markeringen, da vi injicerer forstørrelseselementet under brugerens interaktion. Så se vores HTML!
<div class="container"></div>
I CSS'en vil vi oprette width
, height
variabler til at gemme dimensionerne af selve forstørrelsesglasset. Så giver vi det .container
en vis form og en background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
Der er nogle ting, vi allerede ved om forstørrelsesglasset, før vi overhovedet ser det, og vi kan definere disse stilarter på forhånd, specifikt de tidligere definerede variabler for .maginifier
's width
, height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
Det er en absolut placeret lille firkant, der bruger samme baggrundsbilledfil som .container
. Bemærk, at calc-funktionen udelukkende bruges her til at konvertere den enhedsløse værdi i variablen til pixels. Du er velkommen til at arrangere det, som du finder passende, så vidt som at eliminere gentagelser i din kode.
Lad os nu vende os til JavaScript, der samler det hele. Først skal vi have adgang til CSS-variablen defineret tidligere. Vi vil bruge dette flere steder senere. Så skal vi få musepositionen i beholderen, fordi det er den værdi, vi vil bruge til forstørrelsesglasets baggrundsposition.
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
Det, vi har brug for, er grundlæggende en mousemove
event lytter på .container
. Så vil vi bruge event.pageX
or event.pageY
egenskab for at få X- eller Y-koordinaten for musen. Men for at få eksakt relative position af musen på et element, skal vi trække positionen af det overordnede element fra den museposition, vi får fra JavaScript ovenfor. En "simpel" måde at gøre dette på er at bruge getBoundingClientRect()
, som returnerer størrelsen af et element og dets position i forhold til visningsporten.
Læg mærke til, hvordan jeg tager hensyn til scrolling. Hvis der er overløb, trækkes vinduet fra pageX
, pageY
offsets vil sikre, at effekten kører som forventet.
Vi vil først oprette forstørrelsesglas div. Dernæst vil vi oprette en mousemove
funktion og tilføje den til billedbeholderen. I denne funktion vil vi give forstørrelsesglasset en klasseattribut. Vi vil også beregne musens position og give forstørrelsesglasset de venstre og øverste værdier, vi beregnede tidligere.
Lad os gå videre og bygge den magnifier
når vi hører en mousemove
begivenhed på .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
Nu skal vi sikre os, at den har et klassenavn, som vi kan anvende til CSS:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
Eksempelvideoen, jeg viste tidligere, placerer forstørrelsesglasset uden for beholderen. Vi vil holde dette simpelt og lægge det oven på beholderen i stedet for, mens musen bevæger sig. Vi vil bruge if
sætninger for kun at indstille forstørrelsesglasset, hvis X- og Y-værdierne er større or lige til nul, og mindre end beholderens bredde eller højde. Det burde holde det inden for rammerne. Bare sørg for at trække bredden og højden af forstørrelsesglasset fra X- og Y-værdierne.
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
Sidst, men bestemt ikke mindst... skal vi lege lidt med luppens baggrundsbillede. Hele pointen er, at brugeren får et STØRRE visning af baggrundsbilledet baseret på, hvor svævningen finder sted. Så lad os definere en lup, vi kan bruge til at skalere tingene op. Derefter definerer vi variabler for baggrundsbilledets bredde og højde, så vi har noget at basere denne skala på, og indstiller alle disse værdier på .magnifier
stilarter:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
Lad os tage X- og Y-koordinaterne for forstørrelsesglasset og anvende dem på .magnifier
elementets background-position
. Som før med forstørrelsesglaspositionen skal vi trække bredden og højden af forstørrelsesglasset fra X- og Y-værdierne ved hjælp af CSS-variablerne.
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
Derefter!
Gør det filmisk
Har du set Ken Burns-effekt? Det er en klassisk og tidløs ting, hvor et billede er større end den beholder, det er i, og derefter glider og skalerer langsomt som en snegl. Næsten alle dokumentarfilm i verden ser ud til at bruge den til stillbilleder. Hvis du har et Apple TV, så har du helt sikkert set det på pauseskærmen.
Der er rigeligt of eksempler på CodePen hvis du vil have en bedre idé.
Du vil se, at der er en række måder at gribe dette an på. Nogle bruger JavaScript. Andre er 100 % CSS. Jeg er sikker på, at JavaScript-tilgange er gode til nogle anvendelsestilfælde, men hvis målet blot er at subtilt skalere billedet, er CSS perfekt egnet.
Vi kunne pifte tingene lidt op ved at bruge flere baggrunde i stedet for én. Eller endnu bedre, hvis vi udvider reglerne til at bruge elementer i stedet for baggrundsbilleder, kan vi anvende den samme animation på alle baggrunde og bruge et strejf af animation-delay
at forvrænge effekten.
Mange måder at gøre dette på, selvfølgelig! Det kan bestemt optimeres med Sass og/eller CSS variabler. For pokker, måske du kan trække det af med en enkelt <div>
Hvis ja, del det i kommentarerne!
Bonus: Gør det fordybende
Jeg ved ikke, om noget er sejere end Sarah Drasners "Happy Halloween" pen… og det er fra 2016! Det er et godt eksempel på, at lag baggrunde og flytter dem med varierende hastigheder for at skabe en næsten filmisk oplevelse. Gud hvor er det fedt!
GSAP er hoveddriveren der, men jeg forestiller mig, at vi kunne lave en nedkogt version, der simpelthen oversætter hvert baggrundslag fra venstre mod højre ved forskellige hastigheder. Ikke så cool, selvfølgelig, men bestemt basisoplevelsen. Du skal sikre dig, at starten og slutningen af hvert baggrundsbillede er ensartet, så det gentages problemfrit, når animationen gentages.
Det var det for nu! Ret pænt, at vi kan bruge baggrunde til meget mere end tekstur og kontrast. Jeg er helt sikker på, at der er tonsvis af andre smarte interaktioner, vi kan anvende på baggrunde. Temani Afif gjorde netop det med en masse pæne hover-effekter til links. Hvad har du i tankerne? Del det med mig i kommentarerne!
- SEO Powered Content & PR Distribution. Bliv forstærket i dag.
- Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
- Kilde: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- Om
- over
- absolutte
- absolut
- adgang
- tilgængelighed
- Konto
- faktisk
- Ad
- annoncer
- forude
- Alle
- allerede
- ,
- animation
- annoncerede
- En anden
- Apple
- Indløs
- tilgang
- tilgange
- passende
- omkring
- aktiv
- tilbage
- baggrund
- background-billede
- baggrunde
- Bad
- bund
- baseret
- Baseline
- I bund og grund
- fordi
- før
- Bedre
- mellem
- Big
- større
- Bit
- grænse
- bygge
- Bunch
- beregne
- beregnet
- tilfælde
- sikkert
- lave om
- billigere
- klasse
- Classic
- Tøj
- kode
- at gå på kompromis
- Overvej
- konsekvent
- konstant
- Container
- indhold
- sammenhæng
- kontrast
- konvertere
- Cool
- koordinere
- kunne
- Kursus
- dæksel
- skabe
- CSS
- Dash
- definerede
- Demoer
- DID
- forskel
- forskellige
- størrelse
- direkte
- visning
- dokumentet
- dokumentarfilm
- Er ikke
- Dont
- tvivler
- driver
- Drop
- i løbet af
- hver
- tidligere
- Edge
- effekt
- effekter
- elementer
- eliminere
- sikre
- ejendom
- Endog
- begivenhed
- NOGENSINDE
- Hver
- præcist nok
- eksempel
- eksempler
- Afslutning
- Udvid
- forvente
- forventet
- erfaring
- ekstra
- Iøjnefaldende
- Feature
- få
- File (Felt)
- Film
- Finde
- ende
- Fornavn
- passer
- flydende
- evigt
- fundet
- Gratis
- fra
- funktion
- få
- Giv
- glas
- Go
- mål
- Goes
- godt
- stor
- højde
- link.
- hold
- håber
- hover
- Hvordan
- Men
- HTML
- HTTPS
- SYG
- idé
- billede
- billeder
- implikationer
- vigtigt
- in
- I andre
- i stedet
- interaktion
- interaktioner
- spørgsmål
- IT
- selv
- JavaScript
- Holde
- King (Konge)
- Kend
- større
- lag
- lag
- begrænsning
- Limited
- Line (linje)
- lidt
- Se
- Main
- lave
- I mellemtiden
- opfylder
- måske
- tankerne
- mere
- mest
- bevægelse
- bevæge sig
- bevægelser
- bevæger sig
- flytning
- flere
- flere baggrunde
- navn
- Behov
- næste
- nummer
- tilbyde
- offset
- ONE
- online
- optimeret
- original
- Andet
- Andre
- uden for
- Mønster
- stykker
- Pitch
- pixel
- Place
- Steder
- plato
- Platon Data Intelligence
- PlatoData
- Leg
- Punkt
- position
- positionerede
- positioner
- positiv
- Praktisk
- smuk
- forhindre
- tidligere
- sandsynligvis
- Produkt
- passende
- egenskaber
- ejendom
- giver
- Sweatre & trøjer
- nå
- læsere
- ægte
- fast ejendom
- gentag
- resultere
- afkast
- Revealed
- rod
- regler
- Kør
- salg
- samme
- frækt
- Scale
- skalaer
- rækkevidde
- Skærm
- skærmlæsere
- rulning
- problemfrit
- synes
- semantik
- sæt
- flere
- Shape
- Del
- delt
- bør
- Simpelt
- ganske enkelt
- enkelt
- Størrelse
- Slides
- langsom
- mindre
- So
- solid
- nogle
- noget
- et eller andet sted
- Space
- specifikt
- hastigheder
- krydderi
- firkant
- starte
- påbegyndt
- udsagn
- butik
- stil
- egnede
- Super
- TAG
- Tag
- tager
- taler
- testamente
- verdenen
- ting
- ting
- tidløs
- gange
- til
- sammen
- tons
- top
- overgang
- sand
- TUR
- tv
- typisk
- enhed
- brug
- Bruger
- værdi
- Værdier
- udgave
- video
- Specifikation
- Ur
- måder
- Hvad
- som
- mens
- Hele
- Wikipedia
- vilje
- inden for
- uden
- ord
- Arbejde
- world
- ville
- X
- år
- Du
- Din
- zephyrnet
- nul
- zoom