Popestrite svoje spletno mesto s temi nasveti in triki za animacijo.
Animacije in prehodi so pomemben del spletnega oblikovanja. Če svoji spletni strani dodate subtilne animacije, jo boste naredili bolj privlačno. Preproste animacije, kot so animirane ikone, kinetična tipografija in animirani logotipi, lahko pomagajo izboljšati uporabniško izkušnjo. Naučite se petih izjemnih trikov za animacijo, ki vam lahko pomagajo poživiti vaše spletno mesto.
1. Preoblikovanje elementa med premikanjem
Ena pogosta praksa načrtovanja je imeti element, ki se ob interakciji poveča. Na primer, morda boste želeli prevesti gumbe nekoliko navzgor, ko nekdo premakne miško nanj. To lahko dosežete s pomočjo CSS transformirati premoženje.
Ob predpostavki, da imate gumb:
<gumb>
Kliknite me
gumb>
Oblikovali ste telo dokumenta in gumb:
/* Poravna gumb na sredino strani */
telo {
zaslon: flex;
višina: 100vh;
align-items: center;
justify-content: center;
Barva ozadja: Črna;
}/* Oblikuje gumb */
modra;
gumb {
oblazinjenje: 1em 2em;
ozadje:
meja: 0;
barva: bela;
mejni polmer: 0.25rem;
kazalec: kazalec;
velikost pisave: 2rem;
prehod: transformirati 500gospa;
}
/* Stanja lebdenja */
gumb:lebdi,
gumb:fokus {
transformirati: translateY(0.75rem) 500gospa;
}
Z zadnjim blokom nastavljate stanja lebdenja in fokusa na gumbu. V obeh stanjih prestavite gumb vzdolž osi Y za 0,75 rem. Gumb bi izgledal takole:
Ko z miško premaknete na gumb, se pomakne navzgor. Prehod traja pol sekunde (500 ms). To je vzorec, ki ga lahko implementirate ne le na svoje gumbe, ampak tudi na druge elemente (npr. slike).
2. Deklaracija več ključnih sličic z eno deklaracijo
Drug pogost vzorec v animacijah CSS je večkratno ponavljanje iste vrednosti. To je lahko določena barva, velikost ali orientacija. To lahko dosežete z uporabo CSS animacije ključnih sličic z deklaracijo več ključnih sličic z eno deklaracijo.
Razmislite o gumbu, ki ste ga ustvarili v prejšnjem razdelku. Morda želite ponoviti več barv ozadja, ko kliknete gumb. Vendar pa želite iti čez isto barvo na različnih stopnjah animacije. Poglejmo, kako to doseči v kodi.
Prvič, gumb želite animirati samo ob kliku. Torej bi ustvarili a script.js datoteka, znotraj katere dostopate do gumba in preklopite razred na gumbu, ko ga kliknete:
konst gumb = dokument.querySelector("gumb")
button.addEventListener("klik", (e) => {
button.classList.toggle('čas za zabavo')
})
Za dostop do gumba s spletne strani smo uporabili querySelector. Če želite izvedeti več o prehodu DOM, preberite našo objavo na kako prečkati DOM z uporabo JavaScripta.
The čas za zabavo razreda aktivira animacijo z naslovom zabava:
.čas za zabavo {
animacija: zabava 2000gospaneskončno;
}
Za animacijo želite začeti z rdečo in preiti na rumeno pri 25 %. Potem bi se vrnili na rdečo pri 50 %, preden bi se vrnili na rumeno pri 75 %. Končno, pri 100 % bi se zadovoljili s temno modro barvo:
@keyframes zabava {
0%, 50% {
Barva ozadja: rdeča;
}
25%, 75% {
Barva ozadja: rumena;
}
100% {
Barva ozadja: hsl(200, 72%, 35%);
}
}
Ta pristop je zelo uporaben za menjavanje barv na barvnem ozadju. Ker lahko ponovite več ključnih sličic v eni spremenljivki, postane uporaba iste lastnosti na različnih stopnjah vaše animacije zelo enostavna.
3. Uporaba @property za animiranje lastnosti po meri
Kot morda že veste, vseh lastnosti v CSS ni mogoče animirati. Uradnik Mozilla dokumentacija hrani posodobljen zapis vseh animiranih lastnosti CSS. Če želite animirati lastnost, ki je ni mogoče animirati, bi bila vaša najboljša rešitev uporaba @lastnina direktiva.
Začnite tako, da spremenite barvo ozadja gumba v linearni gradient:
gumb {
// drugoCSS
ozadje: linearni gradient(90deg, modra, zelena);
// drugoCSS
}
Tukaj je rezultat:
Pogosto bi želeli animirati barvni preliv na gumbu. Čeprav obstajajo triki, s katerimi lahko premikate gradient, ga dejansko ne morete animirati. To je zato, ker ozadje (tako dobro, kot slika ozadja) ni lastnost, ki jo je mogoče animirati. Tukaj je @lastnina pride noter.
The @lastnina vam omogoča registracijo lastnosti po meri. Ko uporabljate @lastnina, mu morate zagotoviti tri vrednosti, in sicer sintaksa, deduje, in začetna vrednost:
@lastnina --barva-1 {
sintaksa: "<barva>";
deduje: prav;
začetna vrednost: rdeča;
}
@lastnina --barva-2 {
sintaksa: "<barva>";
deduje: prav;
začetna vrednost: modra;
}
Prva je začetna lastnost, druga pa ciljna lastnost. Zdaj bi namesto prehoda slike ozadja (ki ga ne morete prehoditi) prešli iz --barva-1 do --barva-2 (vaše lastnosti po meri) v eni sekundi:
gumb {
prehod: --barva-1 1000gospa, --barva-2 1000gospa;
}
Ta tehnika je koristna, ker lahko dodate tudi druge prilagoditve. Na primer, dodate zakasnitev, da omogočite bolj gladko izkušnjo. Možnosti so neskončne.
4. Uporaba negativnih zamikov animacije
Zakasnitve animacije so ključne za ustvarjanje gladkih animacij. Poglejmo primer tega v akciji. V tem delu dodajte a div element s 15 pikami na vrhu gumba:
<divrazred="pike">
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
<divrazred="pika">div>
div>
Tukaj je nekaj osnovnih stajlingov za preobrazbo vsakega otroka div v piko:
.pike {
zaslon: flex;
vrzel: .5rem;
margin-bottom: 20px;
}
.dot {
premer: 10px;
razmerje: 1;
Barva ozadja: rdeča;
mejni polmer: 50%;
}
Tu uporabljamo Flexbox za postavitev pik v vodoravno črto. Če se želite poglobiti v Flexbox, lahko preverite naše Vadnica CSS Flexbox.
V notranjosti script.js, dodajte kodo, ki sproži animacijo pik. Preklapljate ples razred na pike:
button.addEventListener("klik", (e) => {
button.classList.toggle('čas za zabavo')
// Nova koda
dots.forEach((pika) => {
dot.classList.toggle('ples')
})
})
Plesni tečaj aktivira animacijo z naslovom dvigniti:
.dot.ples {
animacija: dvigniti 2000gospaneskončnonadomestni;
}Kar se tiče animacije, preprosto prevedite pike -100px vzdolž osi Y:
@keyframes vzpon {
100% {
transformirati: translateY(-100 slikovnih pik)
}
}Zdaj je čas, da naredimo nekaj zanimivega. Namesto da bi se pike dvignile hkrati, jih želite animirati, da tečejo kot val. Če želite to doseči, morate dodati animacija-zakasnitev na pike in vsako piko povečajte za 100 ms:
.dot:nth-child (1) {
animacija-zakasnitev: 100gospa;
}
.dot:nth-child (2) {
animacija-zakasnitev: 200gospa;
}
.dot:nth-child (3) {
animacija-zakasnitev: 300gospa;
}
.dot:nth-child (4) {
animacija-zakasnitev: 400gospa;
}
/* Nadaljujte, dokler ne dosežete 15. pike */
To ustvari elegantno animacijo, kjer se pike premikajo gor in dol v valoviti obliki. Naslednja slika zajema pike na sredini animacije:
Ne pozabite, da je to lahko problematično, kar nas pripelje do petega nasveta.
5. Uporabite prefers-reduced-motion, da omogočite nastavitve
Vedno imejte v mislih, da veliko ljudi ne mara animacij, ki temeljijo na gibanju. Pravzaprav ima večina uporabnikov nastavitve v brskalniku, ki lahko izklopijo gibanje. Gibanje lahko odvrne čute in v hujših primerih povzroči slabost.
Na srečo lahko za to enostavno poskrbite tako, da svojo animacijo zavijete v a brez želja medijska poizvedba takole:
@mediji(prefers-reduced-motion: no-preference) {
.dot.ples {
animacija: dvigniti 2000gospaneskončnonadomestni;
}
}Zdaj, če bi omogočili raje-zmanjšano-gibanje v vašem brskalniku, se animacija ne bi izvajala.
Preberite več nasvetov in trikov CSS
CSS je poln osupljivih vdorov, ki presegajo animacije in prehode. Obstajajo na primer nasveti in triki, kako narediti celotno postavitev elegantno in odzivno. Prakse vam lahko pomagajo narediti vaše spletno mesto bolj privlačno, dostopno in prijetno za brskanje. Če želite biti najboljši enoodstotni razvijalec CSS, vam nekaj trikov v rokavu zelo pomaga.
