Kaunistage oma veebisaiti nende animatsiooninõuannete ja -nippide abil.
Animatsioonid ja üleminekud on veebidisaini oluline osa. Peente animatsioonide lisamine oma veebilehele muudab selle köitvamaks. Lihtsad animatsioonid, nagu animeeritud ikoonid, kineetiline tüpograafia ja animeeritud logod, võivad aidata kasutajakogemust täiustada. Õppige viis vinget animatsiooninippi, mis aitavad teil oma veebisaiti elavdada.
1. Elemendi muutmine hõljukil
Üks levinud disainipraktika on omada element, mis suureneb, kui sellega suhelda. Näiteks võite soovida tõlkida nuppe veidi ülespoole, kui keegi hõljutab sellel hiirekursorit. Seda saate saavutada CSS-i abil teisendada vara.
Eeldusel, et teil on nupp:
<nuppu>
Klõpsake mind
nuppu>
Olete kujundanud nii dokumendi sisu kui ka nupu:
/* Joondab nupu lehe keskele */
keha {
kuva: painduv;
kõrgus: 100vh;
joondada-üksused: Keskus;
õigustama-sisu: Keskus;
taustavärv: must;
}/* Stiilib nuppu */
nuppu {
polsterdus: 1em 2em;
taustal: sinine;
piir: 0;
värvi: valge;
piiriraadius: 0.25rem;
kursor: osuti;
fondi suurus: 2rem;
üleminek: teisendada 500Prl;
}
/* Hõljutusolekud */
nuppu:hõljuma,
nuppu:fookus {
teisendada: tõlkidaY(0.75 rem) 500Prl;
}
Viimase plokiga määrate nupule hõljutus- ja fookusolekud. Mõlemas olekus tõlgite nuppu piki Y-telge 0,75 rem võrra. Nupp näeks välja selline:
Kui hõljutate hiirekursorit nupul, liigub see ülespoole. Üleminek võtab aega pool sekundit (500 ms). See on muster, mida saate rakendada mitte ainult oma nuppudele, vaid ka teistele elementidele (nt piltidele).
2. Mitme võtmekaadri deklareerimine ühe deklaratsiooniga
Teine levinud muster CSS-animatsioonides on sama väärtuse kordamine mitu korda. See võib olla kindel värv, suurus või suund. Saate seda saavutada kasutades CSS-i võtmekaadri animatsioonid deklareerides ühe deklaratsiooniga mitu võtmekaadrit.
Mõelge eelmises jaotises loodud nupule. Võib-olla soovite nupul klõpsates korrata mitut taustavärvi. Kuid soovite ka animatsiooni eri etappides sama värvi üle vaadata. Vaatame, kuidas seda koodis saavutada.
Esiteks soovite nuppu animeerida ainult siis, kui sellel klõpsate. Nii et sa looksid a script.js fail, mille sees pääsete nupule juurde ja lülitate nupul klassi, kui sellel klõpsate:
konst nupp = dokument.querySelector("nupp")
button.addEventListener("klõpsake", (e) => {
button.classList.toggle('peo aeg')
})
Kasutasime veebilehelt nupule juurdepääsuks querySelectorit. DOM-i läbimise kohta lisateabe saamiseks lugege meie postitust kuidas JavaScripti kasutades DOM-i läbida.
The peo aeg klass aktiveerib animatsiooni pealkirjaga pidu:
.peo aeg {
animatsioon: pidu 2000Prllõpmatu;
}
Animatsiooni puhul soovite alustada punasega ja minna üle kollasele 25%. Siis tuleks 50% juures tagasi punane ja seejärel 75% kollane. Lõpuks, 100%, leppiksite tumesinise värviga:
@keyframes pidu {
0%, 50% {
taustavärv: punane;
}
25%, 75% {
taustavärv: kollane;
}
100% {
taustavärv: hsl(200, 72%, 35%);
}
}
See lähenemine on üsna kasulik värvide vaheldumiseks värvipõhisel taustal. Kuna saate ühes muutujas korrata mitut võtmekaadrit, on sama omaduse kasutamine animatsiooni eri etappides ülilihtne.
3. @property kasutamine kohandatud atribuutide animeerimiseks
Nagu võib-olla juba teate, ei ole kõik CSS-i atribuudid animeeritavad. Ametlik Mozilla dokumentatsioon hoiab ajakohastatud arvestust kõigi animeeritavate CSS-i atribuutide kohta. Kui soovite animeerida mitteanimeeritavat omadust, oleks teie parim lahendus kasutada @kinnisvara direktiiv.
Alustuseks muutke oma nupu taustavärvi lineaarseks gradiendiks.
nuppu {
// muudCSS
taustal: lineaarne gradient(90deg, sinine, roheline);
// muudCSS
}
Siin on väljund:
Sageli soovite nupul olevat värvigradienti animeerida. Kuigi on nippe, mida saate gradiendi liigutamiseks kasutada, ei saa te seda tegelikult animeerida. See on sellepärast, et taustal (sama hästi kui taustapilt) ei ole animeeritav omadus. See on koht @kinnisvara tuleb sisse.
The @kinnisvara direktiiv võimaldab teil registreerida kohandatud atribuute. Kui kasutate @kinnisvara, peate sellele esitama kolm väärtust, nimelt süntaks, päribja Algne väärtus:
@kinnisvara --värv-1 {
süntaks: "<värvi>";
pärib: tõsi;
Algne väärtus: punane;
}
@kinnisvara --värv-2 {
süntaks: "<värvi>";
pärib: tõsi;
Algne väärtus: sinine;
}
Esimene on lähteatribuut, teine aga sihtkoha atribuut. Nüüd peaksite taustapildi (mida te ei saa üle kanda) teisaldamise asemel üle minna --värv-1 juurde --värv-2 (teie kohandatud omadused) ühe sekundiga:
nuppu {
üleminek: --värv-1 1000Prl, --värv-2 1000Prl;
}
See tehnika on kasulik, kuna saate lisada ka muid kohandusi. Näiteks lisate viivituse, et muuta see sujuvamaks. Võimalusi on lõputult.
4. Negatiivse animatsiooni viivituste kasutamine
Animatsiooni viivitused on sujuva animatsiooni loomisel üliolulised. Vaatame selle näidet tegevuses. Selles osas lisage a div element, mille nupu ülaosas on 15 punkti:
<divklass="täpid">
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
div>
Siin on mõned põhilised stiilid iga lapse muutmiseks div punktiks:
.punktid {
kuva: painduv;
lõhe: .5rem;
margin-alumine: 20px;
}
.dot {
laius: 10px;
kuvasuhe: 1;
taustavärv: punane;
piiriraadius: 50%;
}
Siin kasutame Flexboxi punktide paigutamiseks horisontaaljoonele. Flexboxi sügavale sukeldumiseks vaadake meie CSS Flexboxi õpetus.
Sees script.js, lisage kood, mis käivitab punktide animatsiooni. Sa lülitad sisse tantsida klass punktidel:
button.addEventListener("klõpsake", (e) => {
button.classList.toggle('peo aeg')
// Uus kood
dots.forEach((punkt) => {
dot.classList.toggle('tants')
})
})
Tantsutunnis aktiveeritakse animatsioon pealkirjaga tõusma:
.dot.tants {
animatsioon: tõusma 2000Prllõpmatuvaheldumisi;
}Mis puudutab animatsiooni, siis lihtsalt tõlkige punktid -100 pikslit piki Y-telge:
@keyframes tõusma {
100% {
teisendada: tõlkidaY(-100 pikslit)
}
}Nüüd on aeg midagi huvitavat ette võtta. Selle asemel, et täpid tõuseksid samal ajal, soovite animeerida täpid, et need voolaksid nagu laine. Selle saavutamiseks peate lisama animatsioon-viivitus punktideni ja suurendage iga punkti 100 ms võrra:
.dot:nth-laps (1) {
animatsioon-viivitus: 100Prl;
}
.dot:nth-laps (2) {
animatsioon-viivitus: 200Prl;
}
.dot:nth-laps (3) {
animatsioon-viivitus: 300Prl;
}
.dot:nth-laps (4) {
animatsioon-viivitus: 400Prl;
}
/* Jätkake, kuni jõuate 15. punktini */
See loob klanitud animatsiooni, kus punktid liiguvad lainelisel kujul üles ja alla. Järgmine pilt jäädvustab punktid animatsiooni keskel:
Pidage meeles, et see võib olla problemaatiline, mis viib meid viienda näpunäide juurde.
5. Kasutage eelistuste lubamiseks eelistus-vähendatud liikumist
Pidage alati meeles, et paljudele inimestele ei meeldi liikumispõhised animatsioonid. Tegelikult on enamikul kasutajatel brauseris eelistused, mis võivad liikumise välja lülitada. Liikumine võib meeli häirida ja rasketel juhtudel põhjustada iiveldust.
Õnneks saate selle eest hõlpsasti hoolitseda, mähkides oma animatsiooni a-sse ei-eelistust meedia päring nagu näiteks:
@meedia(eelistab-reduced-motion: no-preference) {
.dot.tants {
animatsioon: tõusma 2000Prllõpmatuvaheldumisi;
}
}Kui nüüd lubaksite eelistab-vähendatud-liikumist brauseris, siis animatsioon ei tööta.
Lisateave CSS-i näpunäidete ja nippide kohta
CSS on täis vingeid häkke, mis ulatuvad kaugemale animatsioonidest ja üleminekutest. Näiteks on näpunäiteid ja näpunäiteid kogu paigutuse sujuvaks ja tundlikuks muutmiseks. Need tavad võivad aidata teil muuta oma veebisaidi köitvamaks, juurdepääsetavamaks ja sirvimiseks meeldivamaks. Kui soovite olla CSS-i tipparendaja, siis aitab paari nipi varrukast hoidmine palju.
