Patobulinkite savo svetainę naudodami šiuos animacijos patarimus ir gudrybes.
Animacijos ir perėjimai yra svarbi interneto dizaino dalis. Įtraukę į savo tinklalapį subtilių animacijų, jis taps patrauklesnis. Paprasta animacija, pvz., animuotos piktogramos, kinetinė tipografija ir animuoti logotipai, gali padėti pagerinti vartotojo patirtį. Sužinokite penkias nuostabias animacijos gudrybes, kurios gali padėti pagyvinti svetainę.
1. Elemento transformavimas ant pelės žymeklio
Viena įprastų projektavimo praktikų yra elemento, kuris sąveikaujant su juo dydis padidėja. Pavyzdžiui, galbūt norėsite paversti mygtukus šiek tiek aukštyn, kai kas nors užveda ant jų pelės žymeklį. Tai galite pasiekti naudodami CSS transformuoti nuosavybė.
Darant prielaidą, kad turite mygtuką:
<mygtuką>
Paspausk mane
mygtuką>
Jūs sukūrėte dokumento teksto ir mygtuko stilių:
/* Sulygiuoja mygtuką su puslapio centru */
kūnas {
ekranas: lankstus;
aukščio: 100vh;
išlyginti elementus: centras;
pateisinti-turinys: centras;
fono spalva: juodas;
}/* Sukuria mygtuko stilių */
mygtuką {
kamšalas: 1em 2em;
fone: mėlyna;
siena: 0;
spalva: baltas;
pasienio spindulys: 0.25 rem;
žymeklį: rodyklė;
šrifto dydis: 2rem;
perėjimas: transformuoti 500ms;
}
/* Užveskite pelės žymeklį */
mygtuką:užveskite pelės žymeklį,
mygtuką:fokusas {
transformuoti: išverstiY(0.75 rem) 500ms;
}
Paskutiniame bloke nustatote mygtuko užvedimo ir fokusavimo būsenas. Abiejose būsenose mygtuką išilgai Y ašies paverčiate 0,75 rem. Mygtukas atrodytų taip:
Kai užvedate pelės žymeklį ant mygtuko, jis brūkšteli aukštyn. Perėjimas užtrunka pusę sekundės (500 ms). Tai yra modelis, kurį galite pritaikyti ne tik ant mygtukų, bet ir ant kitų elementų (pvz., paveikslėlių).
2. Kelių pagrindinių kadrų deklaravimas su viena deklaracija
Kitas įprastas CSS animacijų modelis yra tos pačios vertės kartojimas kelis kartus. Tai gali būti konkreti spalva, dydis arba orientacija. Tai galite pasiekti naudodami CSS pagrindinių kadrų animacijos deklaruodami kelis pagrindinius kadrus viena deklaracija.
Apsvarstykite mygtuką, kurį sukūrėte ankstesniame skyriuje. Galbūt norėsite kartoti kelias fono spalvas, kai spustelėsite mygtuką. Bet jūs taip pat norite pereiti per tą pačią spalvą skirtinguose animacijos etapuose. Pažiūrėkime, kaip tai pasiekti kode.
Pirma, norite animuoti mygtuką tik spustelėjus. Taigi sukurtumėte a script.js failą, kuriame galite pasiekti mygtuką ir perjungti klasę ant mygtuko, kai jį spustelite:
konst mygtukas = dokumentas.querySelector("mygtukas")
button.addEventListener("spausti", (e) => {
button.classList.toggle('vakarelio metas')
})
Norėdami pasiekti mygtuką iš tinklalapio, naudojome querySelector. Norėdami sužinoti daugiau apie DOM perėjimą, perskaitykite mūsų įrašą kaip pereiti DOM naudojant JavaScript.
The vakarelio metas klasė suaktyvina animaciją pavadinimu vakarėlis:
.vakarelio metas {
animacija: vakarėlis 2000msbegalinis;
}
Animaciją norite pradėti nuo raudonos spalvos ir pereiti prie geltonos spalvos 25%. Tada 50 % grįžtumėte prie raudonos spalvos, o tada grįžtumėte į geltoną 75 %. Galiausiai, 100 %, jūs pasitenkintumėte tamsiai mėlyna spalva:
@keyframes vakarėlis {
0%, 50% {
fono spalva: raudona;
}
25%, 75% {
fono spalva: geltona;
}
100% {
fono spalva: hsl(200, 72%, 35%);
}
}
Šis metodas yra gana naudingas kaitaliojant spalvas spalvotame fone. Viename kintamajame galite pakartoti kelis pagrindinius kadrus, todėl labai lengva naudoti tą pačią nuosavybę skirtinguose animacijos etapuose.
3. @property naudojimas tinkintoms ypatybėms animuoti
Kaip jau tikriausiai žinote, ne visos CSS savybės yra animacinės. Oficialus Mozilla dokumentacija saugo atnaujintą visų animuojamų CSS ypatybių įrašą. Jei norite animuoti neanimuojančią nuosavybę, geriausias sprendimas būtų naudoti @nuosavybė direktyva.
Pradėkite pakeisdami mygtuko fono spalvą į linijinį gradientą:
mygtuką {
// kitasCSS
fone: tiesinis-gradientas(90deg, mėlyna, žalias);
// kitasCSS
}
Štai išvestis:
Dažnai norite animuoti mygtuko spalvų gradientą. Nors yra gudrybių, kurias galite naudoti norėdami perkelti gradientą, iš tikrųjų negalite jo animuoti. Tai yra, nes fone (taip pat fono vaizdas) nėra animacinė nuosavybė. Štai kur @nuosavybė įeina.
The @nuosavybė direktyva leidžia registruoti pasirinktines ypatybes. Kai naudojate @nuosavybė, turite pateikti tris reikšmes, būtent sintaksė, paveldi, ir pradinė vertė:
@nuosavybė --spalva-1 {
sintaksė: "<spalva>";
paveldi: tiesa;
pradinė vertė: raudona;
}
@nuosavybė --spalva-2 {
sintaksė: "<spalva>";
paveldi: tiesa;
pradinė vertė: mėlyna;
}
Pirmoji yra pradinė ypatybė, o antroji yra paskirties ypatybė. Dabar vietoj fono paveikslėlio (kurio negalite perkelti) perkelkite iš --spalva-1 į --spalva-2 (jūsų tinkintos ypatybės) per vieną sekundę:
mygtuką {
perėjimas: --spalva-1 1000ms, --spalva-2 1000ms;
}
Ši technika yra naudinga, nes taip pat galite pridėti kitų tinkinimų. Pavyzdžiui, pridedate delsą, kad būtų sklandesnė patirtis. Galimybės yra neribotos.
4. Neigiamos animacijos delsos naudojimas
Animacijos delsos yra labai svarbios kuriant sklandžią animaciją. Pažiūrėkime, kaip tai veikia. Šioje dalyje pridėkite a div elementas su 15 taškų mygtuko viršuje:
<divklasė="taškai">
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
<divklasė="taškas">div>
div>
Štai keletas pagrindinių stilių, kaip pakeisti kiekvieną vaiką div į tašką:
.taškai {
ekranas: lankstus;
tarpas: .5rem;
paraštė-apačia: 20px;
}
.taškas {
plotis: 10px;
kraštinių santykis: 1;
fono spalva: raudona;
pasienio spindulys: 50%;
}
Čia mes naudojame „Flexbox“, kad įdėtume taškus į horizontalią liniją. Norėdami pasinerti į „Flexbox“, galite peržiūrėti mūsų CSS Flexbox pamoka.
Viduje script.js, pridėkite kodą, kuris suaktyvina taškų animaciją. Jūs perjungiate šokis klasė ant taškų:
button.addEventListener("spausti", (e) => {
button.classList.toggle('vakarelio metas')
// Naujas kodas
dots.forEach((taškas) => {
dot.classList.toggle('šokis')
})
})
Šokių klasėje aktyvuojama animacija pavadinimu kilti:
.taškas.šokis {
animacija: kilti 2000msbegalinisAlternatyva;
}Kalbant apie animaciją, tiesiog išverskite taškus –100 pikselių išilgai Y ašies:
@keyframes kilti {
100% {
transformuoti: išverstiY(-100 taškų)
}
}Dabar atėjo laikas padaryti ką nors įdomaus. Vietoj to, kad taškai kiltų tuo pačiu metu, norite suaktyvinti taškus, kad jie tekėtų kaip banga. Norėdami tai pasiekti, turite pridėti animacija-delsinimas iki taškų ir kiekvieną tašką padidinkite 100 ms:
.taškas:nth-child (1) {
animacija-delsinimas: 100ms;
}
.taškas:nth-child (2) {
animacija-delsinimas: 200ms;
}
.taškas:nth-child (3) {
animacija-delsinimas: 300ms;
}
.taškas:nth-child (4) {
animacija-delsinimas: 400ms;
}
/* Darykite, kol pasieksite 15 tašką */
Taip sukuriama aptaki animacija, kurioje taškai banguotai juda aukštyn ir žemyn. Toliau pateiktame paveikslėlyje užfiksuoti taškai animacijos viduryje:
Atminkite, kad tai gali būti problematiška, todėl pereiname prie penktojo patarimo.
5. Norėdami įjungti nuostatas, naudokite preferences-redduced-motion
Visada atminkite, kad daugelis žmonių nemėgsta judesio animacijos. Tiesą sakant, dauguma vartotojų turi naršyklės nuostatas, kurios gali išjungti judesį. Judėjimas gali atitraukti jusles, o sunkiais atvejais sukelti pykinimą.
Laimei, galite nesunkiai tuo pasirūpinti, įtraukdami animaciją į a Nesvarbu žiniasklaidos užklausa, tokia:
@media(prefers-reduced-motion: no-Preference) {
.taškas.šokis {
animacija: kilti 2000msbegalinisAlternatyva;
}
}Dabar, jei įgalintumėte teikia pirmenybę sumažintam judėjimui naršyklėje, tada animacija nebus paleista.
Sužinokite daugiau CSS patarimų ir gudrybių
CSS yra pilnas nuostabių įsilaužimų, kurie neapsiriboja animacijomis ir perėjimais. Pavyzdžiui, yra patarimų ir gudrybių, kaip padaryti visą jūsų išdėstymą aptakų ir jautrų. Ši praktika gali padėti padaryti svetainę patrauklesnę, prieinamesnę ir malonesnę naršyti. Jei norite būti geriausiu vieno procento CSS kūrėju, kelios gudrybės labai padeda.
