Adesea ne gândim la imaginile de fundal ca o textură sau ceva care oferă contrast pentru conținutul lizibil - cu alte cuvinte, nu chiar conținut. Dacă ar fi conținut, probabil ai ajunge la un <img>
oricum, accesibilitate și nu numai.
Dar sunt momente când poziţie or scară a unei imagini de fundal ar putea sta undeva între polii conținutului și decorului. Contextul este rege, nu? Dacă schimbăm poziția imaginii de fundal, aceasta poate transmite un pic mai mult context sau experiență.
Cum așa? Să ne uităm la câteva exemple pe care le-am văzut plutind în jur.
Pe măsură ce începem, voi avertiza că există o linie fină în aceste demonstrații între imaginile folosite pentru decorare și imaginile folosite ca conținut. Diferența are implicații de accesibilitate atunci când fundalurile nu sunt anunțate cititorilor de ecran. Dacă imaginea ta este într-adevăr o imagine, atunci poate luați în considerare un <img>
eticheta cu corespunzator alt
text. Și, în timp ce vorbim de accesibilitate, este o idee bună luați în considerare preferințele de mișcare ale unui utilizator de asemenea.
Arată-mi mai multe!
Chris Coyier are acest mic demo frumos de acum câțiva ani.
Demo-ul este foarte practic în multe feluri, deoarece este o abordare bună pentru afișarea reclamelor în conținut. Aveți argumentul de vânzare și o imagine atrăgătoare pentru a o completa.
Pariez că marea limitare pentru majoritatea reclamelor este imobilul limitat. Nu știu dacă ați fost nevoit vreodată să plasați un anunț pe o pagină, dar am și de obicei îi cer agentului de publicitate o imagine care să respecte dimensiunile exacte în pixeli, astfel încât materialul să se potrivească spațiului.
Dar demonstrația lui Chris ameliorează problema spațiului. Treceți cu mouse-ul pe imagine și urmăriți-l atât în mișcare, cât și în scalare. Utilizatorul chiar primește mai mult context pentru produs decât ar avea atunci când imaginea se afla în poziția inițială. Este un câștig-câștig, nu? Agentul de publicitate poate crea o imagine atrăgătoare fără a compromite contextul. Între timp, utilizatorul primește o mică valoare în plus din porțiunile nou dezvăluite ale imaginii.
Dacă te uiți la marcajul demo-ului, vei observa că este cam ceea ce te-ai aștepta. Iată o versiune prescurtată:
<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>
Probabil că am putea să ne chibzuim puțin peste semantică, dar nu acesta este ideea. Avem un container cu o legătură <div>
pentru imaginea de fundal și alta <div>
pentru a păstra conținutul.
În ceea ce privește stilul, piesele importante sunt aici:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
Nu-i rău, nu? Dăm containerului câteva dimensiuni și setăm pe el o imagine de fundal care nu se repetă și este poziționată de marginea din stânga jos.
Trucul adevărat este cu JavaScript. Vom folosi asta pentru a obține poziția mouse-ului și offset-ul containerului, apoi convertim acea valoare la o scară adecvată pentru a seta background-position
. Mai întâi, să ascultăm mișcările mouse-ului pe .container
element:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
De aici, putem folosi containerul offsetX
și offsetY
proprietăți. Dar nu vom folosi aceste valori direct, deoarece valoarea coordonatei X este mai mică decât ceea ce avem nevoie, iar coordonata Y este mai mare. Va trebui să ne jucăm puțin pentru a găsi o constantă pe care să o putem folosi ca multiplicator.
Este un pic de atingere și simțire, dar am găsit asta 1.32
și 0.455
funcționează perfect pentru coordonatele X și respectiv Y. Înmulțim offset-urile cu acele valori, anexăm a px
unitate asupra rezultatului, apoi aplicați-o pe background-position
valori.
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"; }
);
În cele din urmă, putem, de asemenea, reseta pozițiile de fundal înapoi la original dacă utilizatorul părăsește containerul de imagine.
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
Deoarece suntem pe CSS-Tricks, voi oferi că am fi putut face o versiune mult mai ieftină a acesteia, cu o mică tranziție de hover în vanilla CSS:
Pictează o imagine mai mare
Fără îndoială că ați fost la un magazin de îmbrăcăminte online sau orice altceva și ați întâlnit vechea funcție de zoom-on-hover.
Acest tipar a existat pentru totdeauna (Dylan Winn-Brown și-a împărtășit abordarea înapoi în 2016), dar asta este doar o dovadă (sper) a utilităţii sale. Utilizatorul primește mai mult context pe măsură ce mărește și își face o idee mai bună despre cusăturile unui pulover sau ce aveți.
Există două piese în asta: recipient si lupă. Containerul este singurul lucru de care avem nevoie în marcaj, deoarece vom injecta elementul de lupă în timpul interacțiunii utilizatorului. Deci, iată HTML-ul nostru!
<div class="container"></div>
În CSS, vom crea width
și height
variabile pentru a stoca dimensiunile lupei în sine. Atunci vom da asta .container
oarecare formă și a 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;
}
Există câteva lucruri pe care le știm deja despre lupă chiar înainte de a o vedea și putem defini acele stiluri în avans, în special variabilele definite anterior pentru .maginifier
„s width
și 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;
}
Este un pătrat absolut poziționat care folosește acelaşi fișier imagine de fundal ca .container
. Rețineți că funcția calc este folosită aici doar pentru a converti valoarea fără unități din variabilă în pixeli. Simțiți-vă liber să aranjați așa cum credeți de cuviință, în măsura în care eliminați repetarea în codul dvs.
Acum, să ne întoarcem la JavaScript care reunește toate acestea. Mai întâi trebuie să accesăm variabila CSS definită mai devreme. Vom folosi acest lucru în mai multe locuri mai târziu. Apoi trebuie să obținem poziția mouse-ului în container, deoarece aceasta este valoarea pe care o vom folosi pentru poziția de fundal a lupei.
// 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;
Ceea ce avem nevoie este practic a mousemove
ascultător de evenimente pe .container
. Apoi, vom folosi event.pageX
or event.pageY
proprietate pentru a obține coordonatele X sau Y ale mouse-ului. Dar pentru a obține exact poziția relativă a mouse-ului pe un element, trebuie să scădem poziția elementului părinte din poziția mouse-ului pe care o obținem din JavaScript de mai sus. Un mod „simplu” de a face acest lucru este utilizarea getBoundingClientRect()
, care returnează dimensiunea unui element și poziția acestuia în raport cu fereastra.
Observați cum țin cont de defilare. Dacă există preaplin, scăderea ferestrei pageX
și pageY
compensațiile vor asigura că efectul se desfășoară conform așteptărilor.
Vom crea mai întâi lupa div. În continuare, vom crea un mousemove
funcția și adăugați-o în containerul de imagini. În această funcție, vom da lupei un atribut de clasă. Vom calcula, de asemenea, poziția mouse-ului și vom oferi lupei valorile din stânga și de sus pe care le-am calculat mai devreme.
Să mergem mai departe și să construim magnifier
când auzim a mousemove
eveniment pe .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
Acum trebuie să ne asigurăm că are un nume de clasă pe care îl putem include în CSS:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
Exemplul video pe care l-am arătat mai devreme poziționează lupa în afara containerului. Vom păstra acest lucru simplu și îl vom suprapune deasupra containerului, în schimb, pe măsură ce mouse-ul se mișcă. Noi vom folosi if
instrucțiuni pentru a seta poziția lupei numai dacă valorile X și Y sunt mai mare or egal la zero și mai puțin decât lățimea sau înălțimea containerului. Asta ar trebui să-l mențină în limite. Doar asigurați-vă că scădeți lățimea și înălțimea lupei din valorile X și Y.
// 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"; }
});
În sfârșit, dar cu siguranță nu în ultimul rând... trebuie să ne jucăm puțin cu imaginea de fundal a lupei. Ideea este că utilizatorul are o vedere MAI MARE a imaginii de fundal în funcție de locul în care are loc hoverul. Deci, să definim o lupă pe care o putem folosi pentru a mări lucrurile. Apoi vom defini variabile pentru lățimea și înălțimea imaginii de fundal, astfel încât să avem ceva pe care să ne bazăm acea scară și să setăm toate aceste valori pe .magnifier
stiluri:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
Să luăm coordonatele X și Y ale imaginii lupei și să le aplicăm la .magnifier
ale elementului background-position
. La fel ca și înainte cu poziția lupei, trebuie să scădem lățimea și înălțimea lupei din valorile X și Y folosind variabilele CSS.
// 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";
}
Tada!
Fă-o cinematografică
Ai văzut Efectul Ken Burns? Este un lucru clasic și atemporal în care o imagine este mai mare decât recipientul în care se află, apoi alunecă și se scalează lent ca un melc. Aproape fiecare film documentar din lume pare să-l folosească pentru imagini statice. Dacă aveți un Apple TV, atunci cu siguranță l-ați văzut în economizorul de ecran.
Sunt mulțime of exemple la CodePen dacă vrei să-ți faci o idee mai bună.
Veți vedea că există o serie de moduri de a aborda acest lucru. Unii folosesc JavaScript. Altele sunt 100% CSS. Sunt sigur că abordările JavaScript sunt bune pentru unele cazuri de utilizare, dar dacă scopul este pur și simplu de a scala subtil imaginea, CSS este perfect potrivit.
Am putea condimenta puțin lucrurile folosind mai multe fundaluri în loc de unul singur. Sau, mai bine, dacă extindem regulile pentru a folosi elemente în loc de imagini de fundal, putem aplica aceeași animație tuturor fundalurilor și putem folosi o liniuță de animation-delay
să eșaloneze efectul.
O mulțime de moduri de a face asta, desigur! Cu siguranță poate fi optimizat cu variabile Sass și/sau CSS. La naiba, poate o poți reuși cu o singură <div>
Dacă da, împărtășește-l în comentarii!
Bonus: Fă-l captivant
Nu știu dacă ceva este mai tare decât al lui Sarah Drasner Pix „Happy Halloween”.… și asta din 2016! Este un exemplu grozav că straturile de fundal și le mută la viteze diferite pentru a crea o experiență aproape cinematografică. Doamne, e atât de tare!
GSAP este driverul principal acolo, dar îmi imaginez că am putea face o versiune redusă care să traducă pur și simplu fiecare strat de fundal de la stânga la dreapta la viteze diferite. Nu la fel de cool, desigur, dar cu siguranță experiența de bază. Trebuie să vă asigurați că începutul și sfârșitul fiecărei imagini de fundal sunt consecvente, astfel încât să se repete fără probleme atunci când animația se repetă.
Atât deocamdată! Destul de îngrijit că putem folosi fundaluri pentru mult mai mult decât textură și contrast. Sunt absolut sigur că există o mulțime de alte interacțiuni inteligente pe care le putem aplica fundalurilor. Temani Afif a făcut exact asta cu o grămadă de efecte de hover pentru link-uri. La ce te gandesti? Împărtășește-l cu mine în comentarii!
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
- Sursa: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- Despre Noi
- mai sus
- Absolut
- absolut
- acces
- accesibilitate
- Cont
- de fapt
- Ad
- Anunţuri
- înainte
- TOATE
- deja
- și
- animaţie
- a anunțat
- O alta
- Apple
- Aplică
- abordare
- abordari
- adecvat
- în jurul
- activ
- înapoi
- fundal
- imagine de fundal
- fundaluri
- Rău
- de bază
- bazat
- De bază
- Pe scurt
- deoarece
- înainte
- Mai bine
- între
- Mare
- mai mare
- Pic
- frontieră
- construi
- Buchet
- calcula
- calculată
- cazuri
- cu siguranță
- Schimbare
- mai ieftin
- clasă
- clasic
- Îmbrăcăminte
- cod
- compromisor
- Lua în considerare
- consistent
- constant
- Recipient
- conţinut
- context
- contrast
- converti
- Rece
- coordona
- ar putea
- Curs
- acoperi
- crea
- CSS
- Liniuţă
- definit
- Demos
- FĂCUT
- diferenţă
- diferit
- Dimensiuni
- direct
- afișarea
- document
- documentar
- Nu
- Dont
- îndoială
- şofer
- Picătură
- în timpul
- fiecare
- Mai devreme
- Margine
- efect
- efecte
- element
- eliminarea
- asigura
- bunuri
- Chiar
- eveniment
- EVER
- Fiecare
- exact
- exemplu
- exemple
- Părăsirea
- Extinde
- aștepta
- de aşteptat
- experienţă
- suplimentar
- Care îți atrage privirea
- Caracteristică
- puțini
- Fișier
- Film
- Găsi
- capăt
- First
- potrivi
- plutitor
- pentru totdeauna
- găsit
- Gratuit
- din
- funcţie
- obține
- Da
- de sticlă
- Go
- scop
- Merge
- bine
- mare
- înălțime
- aici
- deţine
- speranţă
- planare
- Cum
- Totuși
- HTML
- HTTPS
- BOLNAV
- idee
- imagine
- imagini
- implicații
- important
- in
- În altele
- in schimb
- interacţiune
- interacţiuni
- problema
- IT
- în sine
- JavaScript
- A pastra
- Rege
- Cunoaște
- mai mare
- strat
- straturi
- limitare
- Limitat
- Linie
- mic
- Uite
- Principal
- face
- Între timp
- se intalneste
- ar putea
- minte
- mai mult
- cele mai multe
- mişcare
- muta
- mișcări
- mişcă
- în mişcare
- multiplu
- fundaluri multiple
- nume
- Nevoie
- următor
- număr
- oferi
- compensa
- ONE
- on-line
- optimizate
- original
- Altele
- Altele
- exterior
- Model
- piese
- Smoală
- Pixel
- Loc
- Locuri
- Plato
- Informații despre date Platon
- PlatoData
- Joaca
- Punct
- poziţie
- poziţionat
- poziţii
- pozitiv
- Practic
- destul de
- împiedica
- în prealabil
- probabil
- Produs
- adecvat
- proprietăţi
- proprietate
- furnizează
- Trage
- ajunge
- cititori
- real
- Imobiliare
- repeta
- rezultat
- Returnează
- Dezvăluit
- rădăcină
- norme
- Alerga
- de vânzări
- acelaşi
- Sass
- Scară
- cântare
- domeniu
- Ecran
- cititoare de ecran
- defilare
- perfect
- pare
- semantică
- set
- câteva
- Modela
- Distribuie
- comun
- să
- simplu
- pur şi simplu
- singur
- Mărimea
- Diapozitive
- încetini
- mai mici
- So
- solid
- unele
- ceva
- undeva
- Spaţiu
- specific
- viteze
- condiment
- pătrat
- Începe
- început
- Declarații
- stoca
- stil
- potrivit
- Super
- TAG
- Lua
- luare
- vorbesc
- testament
- lumea
- lucru
- lucruri
- nesfârșit
- ori
- la
- împreună
- Ton
- top
- tranziţie
- adevărat
- ÎNTORCĂ
- tv
- tipic
- unitate
- utilizare
- Utilizator
- valoare
- Valori
- versiune
- Video
- Vizualizare
- Ceas
- modalități de
- Ce
- care
- în timp ce
- întreg
- Wikipedia
- voi
- în
- fără
- cuvinte
- Apartamente
- lume
- ar
- X
- ani
- Tu
- Ta
- zephyrnet
- zero
- zoom