Uzlabojiet savu vietni, izmantojot šos animācijas padomus un trikus.
Animācijas un pārejas ir svarīga tīmekļa dizaina sastāvdaļa. Smalku animāciju pievienošana savai tīmekļa lapai padarīs to saistošāku. Vienkāršas animācijas, piemēram, animētas ikonas, kinētiskā tipogrāfija un animēti logotipi, var palīdzēt uzlabot lietotāja pieredzi. Uzziniet piecus satriecošus animācijas trikus, kas var palīdzēt atdzīvināt jūsu vietni.
1. Elementa pārveidošana, novietojot kursoru
Viena izplatīta dizaina prakse ir tāda elementa izveide, kas mijiedarbojoties palielinās. Piemēram, jūs varētu vēlēties tulkot pogas nedaudz uz augšu, kad kāds novieto peles kursoru uz tās. To var panākt, izmantojot CSS pārveidot īpašums.
Pieņemot, ka jums ir poga:
<pogu>
Noklikšķiniet uz manis
pogu>
Jūs veidojāt dokumenta pamatteksta stilu, kā arī pogu:
/* Izlīdzina pogu lapas centrā */
ķermeni {
displejs: flex;
augstums: 100vh;
izlīdzināt vienumus: centrs;
attaisnot-saturs: centrs;
fona krāsa: melns;
}/* Veido pogas stilu */
: 1em 2em;
pogu {
polsterējums
fons: zils;
robeža: 0;
krāsa: balts;
robeža-rādiuss: 0.25rem;
kursors: rādītājs;
fonta izmērs: 2rem;
pāreja: pārveidot 500jaunkundze;
}
/* Kursora novietošanas stāvokļi */
pogu:virziet kursoru,
pogu: fokuss {
pārveidot: tulkotY(0.75 rem) 500jaunkundze;
}
Pēdējā blokā jūs iestatāt pogai virzīšanas un fokusa stāvokļus. Abos stāvokļos poga pa Y asi tiek pārvērsta par 0,75 rem. Poga izskatītos šādi:
Novietojot peles kursoru uz pogas, tā virzās uz augšu. Pāreja aizņem pussekundi (500 ms). Šis ir modelis, ko varat ieviest ne tikai uz savām pogām, bet arī uz citiem elementiem (piemēram, attēliem).
2. Vairāku atslēgas kadru deklarēšana ar vienu deklarāciju
Vēl viens izplatīts modelis CSS animācijās ir vienas un tās pašas vērtības atkārtošana vairākas reizes. Tā var būt noteikta krāsa, izmērs vai orientācija. To var sasniegt, izmantojot CSS atslēgas kadru animācijas deklarējot vairākus atslēgas kadrus ar vienu deklarāciju.
Apsveriet pogu, kuru izveidojāt iepriekšējā sadaļā. Varbūt vēlaties atkārtot vairākas fona krāsas, noklikšķinot uz pogas. Bet jūs arī vēlaties izmantot vienu un to pašu krāsu dažādos animācijas posmos. Apskatīsim, kā to panākt kodā.
Pirmkārt, vēlaties animēt pogu tikai pēc noklikšķināšanas. Tātad jūs izveidotu a script.js fails, kurā jūs piekļūstat pogai un pārslēdzat klasi uz pogas, kad tā tiek noklikšķināta:
konst poga = dokumentu.querySelector("poga")
button.addEventListener("klikšķis", (e) => {
button.classList.toggle('ballītes laiks')
})
Mēs izmantojām querySelector, lai piekļūtu pogai no tīmekļa lapas. Lai uzzinātu vairāk par DOM šķērsošanu, izlasiet mūsu ziņu vietnē kā šķērsot DOM, izmantojot JavaScript.
The ballītes laiks klase aktivizē animāciju ar nosaukumu ballīte:
.ballītes laiks {
animācija: ballīte 2000jaunkundzebezgalīgs;
}
Animāciju vēlaties sākt ar sarkanu krāsu un pāriet uz dzeltenu ar 25%. Tad jūs atgrieztos sarkanā krāsā pie 50%, bet pēc tam atgrieztos uz dzelteno pie 75%. Visbeidzot, 100% apmērā jūs samierinātos ar tumši zilu krāsu:
@keyframes ballīte {
0%, 50% {
fona krāsa: sarkans;
}
25%, 75% {
fona krāsa: dzeltens;
}
100% {
fona krāsa: hsl(200, 72%, 35%);
}
}
Šī pieeja ir diezgan noderīga, lai mainītu krāsas uz krāsu fona. Tā kā vienā mainīgajā varat atkārtot vairākus atslēgas kadrus, ir ļoti viegli izmantot vienu un to pašu rekvizītu dažādos animācijas posmos.
3. Izmantojot @property, lai animētu pielāgotos rekvizītus
Kā jūs, iespējams, jau zināt, ne visi CSS rekvizīti ir animējami. Amatpersona Mozilla dokumentācija uztur atjauninātu visu animējamo CSS rekvizītu uzskaiti. Ja vēlaties animēt neanimējamu īpašumu, labākais risinājums būtu izmantot @īpašums direktīva.
Sāciet, mainot pogas fona krāsu uz lineāru gradientu:
pogu {
// citsCSS
fons: lineārs-gradients(90gr, zils, zaļš);
// citsCSS
}
Šeit ir izvade:
Bieži vien vēlaties animēt pogas krāsu gradientu. Lai gan ir daži triki, kurus varat izmantot, lai pārvietotu gradientu, patiesībā to nevar animēt. Tas ir tāpēc, ka fons (kā arī fona attēls) nav animējams īpašums. Šeit ir vieta @īpašums ienāk.
The @īpašums direktīva ļauj reģistrēt pielāgotus rekvizītus. Kad lietojat @īpašums, jums tas jānorāda ar trim vērtībām, proti sintakse, manto, un sākotnējā vērtība:
@īpašums -- krāsa-1 {
sintakse: "<krāsa>";
manto: taisnība;
sākotnējā vērtība: sarkans;
}
@īpašums -- krāsa-2 {
sintakse: "<krāsa>";
manto: taisnība;
sākotnējā vērtība: zils;
}
Pirmais ir sākuma rekvizīts, bet otrais ir galamērķa rekvizīts. Tagad tā vietā, lai pārietu uz fona attēlu (kuru nevarat pāriet), pārejiet no -- krāsa-1 uz -- krāsa-2 (jūsu pielāgotie rekvizīti) vienā sekundē:
pogu {
pāreja: -- krāsa-1 1000jaunkundze, -- krāsa-2 1000jaunkundze;
}
Šis paņēmiens ir noderīgs, jo varat pievienot arī citus pielāgojumus. Piemēram, jūs pievienojat aizkavi, lai nodrošinātu vienmērīgāku pieredzi. Iespējas ir bezgalīgas.
4. Negatīvās animācijas aizkaves izmantošana
Animācijas aizkave ir ļoti svarīga vienmērīgai animāciju veidošanai. Apskatīsim tā piemēru darbībā. Šajā daļā pievienojiet a div elements ar 15 punktiem pogas augšpusē:
<divklasē="punkti">
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
<divklasē="punkts">div>
div>
Šeit ir daži pamata stils, lai pārveidotu katru bērnu div punktā:
.punkti {
displejs: flex;
plaisa: .5rem;
piemale-apakša: 20px;
}
.dot {
platums: 10px;
malu attiecība: 1;
fona krāsa: sarkans;
robeža-rādiuss: 50%;
}
Šeit mēs izmantojam Flexbox, lai novietotu punktus horizontālā līnijā. Lai ienirt Flexbox, varat pārbaudīt mūsu CSS Flexbox apmācība.
Iekšā script.js, pievienojiet kodu, kas aktivizē punktu animāciju. Jūs pārslēdzat uz dejot klase uz punktiem:
button.addEventListener("klikšķis", (e) => {
button.classList.toggle('ballītes laiks')
// Jauns kods
dots.forEach((punkts) => {
dot.classList.toggle('dejot')
})
})
Deju nodarbībā tiek aktivizēta animācija ar nosaukumu celšanās:
.dot.dejot {
animācija: celšanās 2000jaunkundzebezgalīgsaizstājējs;
}Kas attiecas uz animāciju, vienkārši tulkojiet punktus -100 pikseļi gar Y asi:
@keyframes pacelties {
100% {
pārveidot: tulkotY(-100 pikseļi)
}
}Tagad ir pienācis laiks darīt kaut ko interesantu. Tā vietā, lai punkti augtu vienlaikus, jūs vēlaties animēt punktus, lai tie plūstu kā vilnis. Lai to panāktu, jums ir jāpievieno animācijas aizkave līdz punktiem un palieliniet katru punktu par 100 ms:
.dot:nth-child (1) {
animācijas aizkave: 100jaunkundze;
}
.dot:nth-child (2) {
animācijas aizkave: 200jaunkundze;
}
.dot:nth-child (3) {
animācijas aizkave: 300jaunkundze;
}
.dot:nth-child (4) {
animācijas aizkave: 400jaunkundze;
}
/* Turpiniet darīt, līdz sasniedzat 15. punktu */
Tādējādi tiek izveidota gluda animācija, kurā punkti viļņaini pārvietojas uz augšu un uz leju. Šajā attēlā ir attēloti punkti animācijas vidū:
Ņemiet vērā, ka tas var būt problemātiski, un mēs nonākam pie piektā padoma.
5. Lai iespējotu preferences, izmantojiet preferences-reduced-motion
Vienmēr paturiet prātā, ka daudziem cilvēkiem nepatīk uz kustību balstītas animācijas. Faktiski lielākajai daļai lietotāju pārlūkprogrammā ir preferences, kas var izslēgt kustību. Kustība var novērst maņu uzmanību un smagos gadījumos izraisīt sliktu dūšu.
Par laimi, jūs varat to viegli parūpēties, iesaiņojot animāciju iekšā a nav priekšroka mediju vaicājums, piemēram:
@media(prefers-reduced-motion: no-preference) {
.dot.dejot {
animācija: celšanās 2000jaunkundzebezgalīgsaizstājējs;
}
}Tagad, ja jūs iespējotu dod priekšroku-reduced-motion pārlūkprogrammā, tad animācija nedarbosies.
Uzziniet vairāk CSS padomu un triku
CSS ir pilns ar satriecošiem uzlauzumiem, kas pārsniedz animācijas un pārejas. Piemēram, ir padomi un ieteikumi, kā padarīt visu jūsu izkārtojumu gludu un atsaucīgu. Šī prakse var palīdzēt padarīt vietni saistošāku, pieejamāku un patīkamāku pārlūkošanai. Ja vēlaties kļūt par vienu procentu labāko CSS izstrādātāju, pāris triku piedurkne ļoti palīdz.
