Uljepšajte svoju web stranicu pomoću ovih savjeta i trikova za animaciju.
Animacije i prijelazi važan su dio web dizajna. Dodavanje suptilnih animacija vašoj web stranici učinit će je privlačnijom. Jednostavne animacije poput animiranih ikona, kinetičke tipografije i animiranih logotipa mogu poboljšati korisničko iskustvo. Naučite pet sjajnih trikova za animaciju koji vam mogu pomoći da oživite svoju web stranicu.
1. Transformacija elementa pri lebdenju
Jedna uobičajena praksa dizajna je imati element koji se povećava kada se s njim komunicira. Na primjer, možda biste željeli prevesti gumbe malo prema gore kada netko prijeđe mišem na njih. To možete postići pomoću CSS-a transformirati vlasništvo.
Pod pretpostavkom da imate gumb:
<dugme>
Klikni me
dugme>
Stilizirali ste tijelo dokumenta kao i gumb:
/* Poravnava gumb na središte stranice */
tijelo {
prikaz: savijati;
visina: 100vh;
align-items: centar;
opravdati-sadržaj: centar;
boja pozadine: crno;
}/* Stilizira gumb */
: plava;
dugme {
podstava: 1em 2em;
pozadina
granica: 0;
boja: bijela;
granični radijus: 0.25rem;
kursor: pokazivač;
veličina fonta: 2rem;
tranzicija: transformirati 500ms;
}
/* Stanja lebdenja */
dugme:lebdjeti,
dugme:usredotočenost {
transformirati: prevestiY(0.75rem) 500ms;
}
Sa zadnjim blokom, postavljate stanja lebdenja i fokusa na gumbu. U oba stanja pomičete gumb duž Y-osi za 0,75 rema. Gumb bi izgledao ovako:
Kada mišem prijeđete na gumb, on pomiče prema gore. Prijelaz traje pola sekunde (500 ms) da se dovrši. Ovo je uzorak koji možete implementirati ne samo na svoje gumbe, već i na druge elemente (npr. slike).
2. Deklariranje više ključnih okvira jednom deklaracijom
Drugi uobičajeni obrazac u CSS animacijama je ponavljanje preko iste vrijednosti više puta. To može biti određena boja, veličina ili usmjerenje. To možete postići korištenjem CSS animacije ključnih kadrova deklariranjem više ključnih okvira jednom deklaracijom.
Razmotrite gumb koji ste izradili u prethodnom odjeljku. Možda želite iterirati kroz nekoliko pozadinskih boja kada kliknete gumb. Ali također želite ići preko iste boje u različitim fazama animacije. Pogledajmo kako to postići u kodu.
Prvo, želite animirati gumb samo kada se klikne. Pa biste stvorili skripta.js datoteku unutar koje pristupate gumbu i mijenjate klasu na gumbu kada se na njega klikne:
konst gumb = dokument.querySelector("dugme")
button.addEventListener("klik", (e) => {
button.classList.toggle('vrijeme za zabavu')
})
Koristili smo querySelector za pristup gumbu s web stranice. Da biste saznali više o obilasku DOM-a, pročitajte naš post na kako preći DOM koristeći JavaScript.
The vrijeme za zabavu razreda aktivira animaciju pod nazivom Zabava:
.vrijeme za zabavu {
animacija: Zabava 2000msbeskonačan;
}
Za animaciju, želite početi s crvenom i prijeći na žutu na 25%. Onda biste se vratili na crveno na 50% prije nego što biste se vratili na žuto na 75%. Konačno, na 100%, zadovoljili biste se tamnoplavom bojom:
@ključni okviri Zabava {
0%, 50% {
boja pozadine: Crvena;
}
25%, 75% {
boja pozadine: žuta boja;
}
100% {
boja pozadine: hsl(200, 72%, 35%);
}
}
Ovaj je pristup vrlo koristan za izmjenu boja na pozadini koja se temelji na boji. Budući da možete ponoviti više ključnih kadrova u jednoj varijabli, postaje vrlo jednostavno koristiti isto svojstvo u različitim fazama vaše animacije.
3. Korištenje @property za animiranje prilagođenih svojstava
Kao što možda već znate, nisu sva svojstva u CSS-u animirana. Službenik Mozilla dokumentacija vodi ažuriranu evidenciju svih animiranih CSS svojstava. Ako želite animirati svojstvo koje se ne može animirati, najbolje bi rješenje bilo koristiti @vlasništvo direktiva.
Započnite promjenom boje pozadine gumba u linearni gradijent:
dugme {
// drugoCSS
pozadina: linearno-gradijent(90stupanj, plava, zelena);
// drugoCSS
}
Evo rezultata:
Često biste željeli animirati gradijent boja na gumbu. Iako postoje trikovi koje možete koristiti za pomicanje gradijenta, zapravo ga ne možete animirati. Ovo je zbog pozadina (kao i pozadinska slika) nije svojstvo koje se može animirati. Ovo je gdje @vlasništvo ulazi.
The @vlasništvo direktiva omogućuje registraciju prilagođenih svojstava. Kada koristite @vlasništvo, morate mu dati tri vrijednosti, naime sintaksa, nasljeđuje, i početna vrijednost:
@vlasništvo --boja-1 {
sintaksa: "<boja>";
nasljeđuje: pravi;
početna vrijednost: Crvena;
}
@vlasništvo --boja-2 {
sintaksa: "<boja>";
nasljeđuje: pravi;
početna vrijednost: plava;
}
Prvo je početno svojstvo, dok je drugo odredišno svojstvo. Sada, umjesto prijelaza pozadinske slike (koju ne možete prijeći), prijeđite s --boja-1 do --boja-2 (vaša prilagođena svojstva) u jednoj sekundi:
dugme {
tranzicija: --boja-1 1000ms, --boja-2 1000ms;
}
Ova je tehnika korisna jer možete dodati i druge prilagodbe. Na primjer, dodajete odgodu da biste imali glatkiji doživljaj. Mogućnosti su beskrajne.
4. Korištenje negativnih odgoda animacije
Odgode animacije ključne su za stvaranje glatkih animacija. Pogledajmo primjer toga na djelu. U ovom dijelu dodajte a div element s 15 točkica na vrhu gumba:
<divrazreda="točke">
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
<divrazreda="točka">div>
div>
Evo nekih osnovnih stajlinga za preobrazbu svakog djeteta div u točku:
.točke {
prikaz: savijati;
praznina: .5rem;
margina-dno: 20px;
}
.točka {
širina: 10px;
omjer stranica: 1;
boja pozadine: Crvena;
granični radijus: 50%;
}
Ovdje koristimo Flexbox za postavljanje točaka u vodoravnu liniju. Da biste dublje zaronili u Flexbox, možete provjeriti naš CSS Flexbox vodič.
Iznutra skripta.js, dodajte kôd koji pokreće animaciju točaka. Isključujete ples razred na točkice:
button.addEventListener("klik", (e) => {
button.classList.toggle('vrijeme za zabavu')
// Novi kod
dots.forEach((točka) => {
dot.classList.toggle('ples')
})
})
Plesni tečaj aktivira animaciju pod nazivom ustati:
.točka.ples {
animacija: ustati 2000msbeskonačannaizmjenično;
}Što se tiče animacije, jednostavno prevedite točke -100px duž Y-osi:
@ključni okviri ustati {
100% {
transformirati: prevestiY(-100 px)
}
}Sada je vrijeme da učinite nešto zanimljivo. Umjesto da se točkice dižu u isto vrijeme, želite animirati točkice da teku poput vala. Da biste to postigli, trebate dodati animacija-odgoda na točke i povećavajte svaku točku za 100 ms:
.točka:n-to dijete (1) {
animacija-odgoda: 100ms;
}
.točka:n-to dijete (2) {
animacija-odgoda: 200ms;
}
.točka:n-to dijete (3) {
animacija-odgoda: 300ms;
}
.točka:n-to dijete (4) {
animacija-odgoda: 400ms;
}
/* Nastavite dok ne dođete do 15. točke */
Ovo stvara elegantnu animaciju gdje se točkice pomiču gore-dolje u valovitom obliku. Sljedeća slika prikazuje točke u sredini animacije:
Imajte na umu da to može biti problematično, što nas dovodi do petog savjeta.
5. Upotrijebite prefers-reduced-motion za Omogućavanje postavki
Uvijek imajte na umu da mnogi ljudi ne vole animacije temeljene na pokretu. Zapravo, većina korisnika ima postavke u pregledniku koje mogu isključiti kretanje. Kretanje može omesti osjetila, au teškim slučajevima dovesti do mučnine.
Srećom, o tome se možete lako pobrinuti tako da svoju animaciju zamotate u a bez preferencija medijski upit ovako:
@mediji(preferira-reduced-motion: no-preference) {
.točka.ples {
animacija: ustati 2000msbeskonačannaizmjenično;
}
}Sad ako biste trebali omogućiti preferira-smanjeno-kretanje u vašem pregledniku, tada se animacija ne bi pokrenula.
Saznajte više CSS savjeta i trikova
CSS je pun sjajnih hakova koji nadilaze animacije i prijelaze. Na primjer, postoje savjeti i trikovi kako cijeli svoj izgled učiniti elegantnim i brzim. Prakse vam mogu pomoći da svoju web stranicu učinite privlačnijom, pristupačnijom i ugodnijom za pregledavanje. Ako želite biti jedan posto vrhunski CSS programer, onda vam puno pomaže nekoliko trikova u rukavu.