Oživte svoj web pomocou týchto animačných tipov a trikov.
Animácie a prechody sú dôležitou súčasťou webdizajnu. Pridaním jemných animácií na vašu webovú stránku bude pútavejšia. Jednoduché animácie, ako sú animované ikony, kinetická typografia a animované logá, môžu pomôcť zlepšiť používateľskú skúsenosť. Naučte sa päť úžasných animačných trikov, ktoré vám môžu pomôcť oživiť váš web.
1. Transformácia prvku pri umiestnení kurzora myši
Jednou z bežných postupov pri navrhovaní je mať prvok, ktorý sa pri interakcii zväčšuje. Môžete napríklad chcieť preložiť tlačidlá trochu nahor, keď na ne niekto umiestni myš. Môžete to dosiahnuť pomocou CSS transformovať nehnuteľnosť.
Za predpokladu, že máte tlačidlo:
<tlačidlo>
Klikni na mňa
tlačidlo>
Štylizovali ste telo dokumentu, ako aj tlačidlo:
/* Zarovná tlačidlo na stred stránky */
telo {
displej: flex;
výška: 100vh;
align-items: centrum;
ospravedlniť-obsah: centrum;
farba pozadia: čierna;
}/* Upraví štýl tlačidla */
: 0;
tlačidlo {
vypchávka: 1em 2em;
pozadie: Modrá;
hranica
farba: biely;
hraničný polomer: 0.25rem;
kurzor: ukazovateľ;
veľkosť písma: 2rem;
prechod: transformovať 500pani;
}
/* Stavy kurzora */
tlačidlo:vznášať sa,
tlačidlo:zamerajte sa {
transformovať: preložiťY(0.75rem) 500pani;
}
S posledným blokom nastavujete stavy kurzora a kurzora na tlačidlo. V oboch stavoch preložíte tlačidlo pozdĺž osi Y o 0,75rem. Tlačidlo by vyzeralo takto:
Keď umiestnite kurzor myši na tlačidlo, švihne smerom nahor. Prechod trvá pol sekundy (500 ms). Toto je vzor, ktorý môžete implementovať nielen na svoje tlačidlá, ale aj na iné prvky (napr. obrázky).
2. Deklarovanie viacerých kľúčových snímok jednou deklaráciou
Ďalším bežným vzorom v animáciách CSS je opakované opakovanie rovnakej hodnoty. Môže to byť konkrétna farba, veľkosť alebo orientácia. Môžete to dosiahnuť pomocou Animácie kľúčových snímok CSS deklarovaním viacerých kľúčových snímok jednou deklaráciou.
Zvážte tlačidlo, ktoré ste vytvorili v predchádzajúcej časti. Možno budete chcieť po kliknutí na tlačidlo opakovať niekoľko farieb pozadia. Ale tiež chcete prejsť cez rovnakú farbu v rôznych fázach animácie. Pozrime sa, ako to dosiahnuť v kóde.
Po prvé, chcete tlačidlo animovať iba po kliknutí. Takže by ste vytvorili a script.js súbor, v ktorom máte prístup k tlačidlu a prepínate triedu na tlačidle, keď naň kliknete:
konšt tlačidlo = dokument.querySelector("tlačidlo")
button.addEventListener("klik", (e) => {
button.classList.toggle('čas na párty')
})
Na prístup k tlačidlu z webovej stránky sme použili querySelector. Ak sa chcete dozvedieť viac o prechode DOM, prečítajte si náš príspevok na ako prechádzať DOM pomocou JavaScriptu.
The čas na párty trieda aktivuje animáciu s názvom večierok:
.čas na párty {
animácie: večierok 2000paninekonečné;
}
Pre animáciu chcete začať s červenou farbou a prejsť na žltú na 25 %. Potom by ste sa vrátili k červenej na 50% a potom by ste sa vrátili späť k žltej na 75%. Nakoniec, na 100% by ste sa uspokojili s tmavomodrou farbou:
@kľúčové snímky párty {
0%, 50% {
farba pozadia: červená;
}
25%, 75% {
farba pozadia: žltá;
}
100% {
farba pozadia: hsl(200, 72%, 35%);
}
}
Tento prístup je celkom užitočný na striedanie farieb na farebnom pozadí. Pretože môžete opakovať viacero kľúčových snímok v jednej premennej, je veľmi jednoduché používať rovnakú vlastnosť v rôznych fázach animácie.
3. Použitie @property na animáciu užívateľských vlastností
Ako už možno viete, nie všetky vlastnosti v CSS sú animovateľné. Oficiálne Dokumentácia Mozilly vedie aktualizovaný záznam všetkých animovateľných vlastností CSS. Ak chcete animovať neanimovateľnú vlastnosť, najlepším riešením by bolo použiť @nehnuteľnosť smernice.
Začnite zmenou farby pozadia tlačidla na lineárny prechod:
tlačidlo {
// inéCSS
pozadie: lineárny gradient(90stupeň, Modrá, zelená);
// inéCSS
}
Tu je výstup:
Často by ste chceli animovať farebný prechod na tlačidle. Hoci existujú triky, ktoré môžete použiť na posúvanie prechodu, v skutočnosti ho nemôžete animovať. To je preto, že pozadie (ako aj obrázok na pozadí) nie je animovateľná vlastnosť. Toto je kde @nehnuteľnosť prichádza dovnútra.
The @nehnuteľnosť direktíva umožňuje registrovať vlastné vlastnosti. Keď použijete @nehnuteľnosť, musíte mu poskytnúť tri hodnoty, a to syntax, dedí, a pôvodná hodnota:
@nehnuteľnosť --farba-1 {
syntax: "<farba>";
dedí: pravda;
pôvodná hodnota: červená;
}
@nehnuteľnosť --farba-2 {
syntax: "<farba>";
dedí: pravda;
pôvodná hodnota: Modrá;
}
Prvá je počiatočná vlastnosť, zatiaľ čo druhá je cieľová vlastnosť. Teraz namiesto prechodu obrázka na pozadí (ktorý nemôžete prechádzať) by ste prešli z --farba-1 do --farba-2 (vaše vlastné vlastnosti) za jednu sekundu:
tlačidlo {
prechod: --farba-1 1000pani, --farba-2 1000pani;
}
Táto technika je užitočná, pretože môžete pridať aj ďalšie prispôsobenia. Môžete napríklad pridať oneskorenie, aby bol zážitok plynulejší. Možnosti sú nekonečné.
4. Používanie negatívnych oneskorení animácií
Oneskorenia animácií sú rozhodujúce pre vytváranie plynulých animácií. Pozrime sa na príklad v praxi. V tejto časti pridajte a div prvok s 15 bodkami v hornej časti tlačidla:
<divtrieda="bodky">
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
<divtrieda="bodka">div>
div>
Tu je niekoľko základných štýlov, ktoré premenia každé dieťa div do bodky:
.bodky {
displej: flex;
medzera: .5rem;
okraj-dole: 20px;
}
.bodka {
šírka: 10px;
pomer strán: 1;
farba pozadia: červená;
hraničný polomer: 50%;
}
Tu používame Flexbox na umiestnenie bodiek do vodorovnej čiary. Ak sa chcete ponoriť hlboko do Flexboxu, môžete si pozrieť naše Návod CSS Flexbox.
Vnútri script.js, pridajte kód, ktorý spustí animáciu bodiek. Prepínate tanec trieda na bodky:
button.addEventListener("klik", (e) => {
button.classList.toggle('čas na párty')
// Nový kód
dots.forEach((bodka) => {
dot.classList.toggle('tancovať')
})
})
Tanečná hodina aktivuje animáciu s názvom stúpať:
.bodka.tancovať {
animácie: stúpať 2000paninekonečnéstriedať;
}Pokiaľ ide o animáciu, jednoducho preložte bodky -100 pixelov pozdĺž osi Y:
@kľúčové snímky stúpať {
100% {
transformovať: preložiťY(-100 pixelov)
}
}Teraz je čas urobiť niečo zaujímavé. Namiesto toho, aby bodky súčasne stúpali, chcete animovať, aby bodky plynuli ako vlna. Aby ste to dosiahli, musíte pridať animácia-oneskorenie na bodky a zvýšte každú bodku o 100 ms:
.bodka:n-té dieťa (1) {
animácia-oneskorenie: 100pani;
}
.bodka:n-té dieťa (2) {
animácia-oneskorenie: 200pani;
}
.bodka:n-té dieťa (3) {
animácia-oneskorenie: 300pani;
}
.bodka:n-té dieťa (4) {
animácia-oneskorenie: 400pani;
}
/* Pokračujte, kým nedosiahnete 15. bodku */
To vytvára elegantnú animáciu, kde sa bodky pohybujú nahor a nadol vo zvlnenej forme. Nasledujúci obrázok zachytáva bodky v strede animácie:
Majte na pamäti, že to môže byť problematické, čím sa dostávame k piatemu tipu.
5. Použite prefers-reduced-motion na Povoliť preferencie
Vždy majte na pamäti, že veľa ľudí nemá rado animácie založené na pohybe. V skutočnosti má väčšina používateľov v prehliadači predvoľby, ktoré môžu vypnúť pohyb. Pohyb môže rozptyľovať zmysly a v závažných prípadoch môže viesť k nevoľnosti.
Našťastie sa o to môžete ľahko postarať tak, že svoju animáciu zabalíte do a bez zvyhodnenia mediálny dopyt takto:
@media(prefers-reduced-motion: no-preference) {
.bodka.tancovať {
animácie: stúpať 2000paninekonečnéstriedať;
}
}Teraz, ak by ste mali povoliť preferuje-redukovaný-pohyb vo vašom prehliadači, potom by sa animácia nespustila.
Zistite viac tipov a trikov CSS
CSS je plné úžasných hackov, ktoré idú nad rámec animácií a prechodov. Existujú napríklad tipy a triky, ako urobiť celé rozloženie elegantné a reagovať. Tieto postupy vám môžu pomôcť urobiť vašu webovú stránku pútavejšou, prístupnejšou a príjemnejšou na prehliadanie. Ak chcete byť špičkovým jednopercentným vývojárom CSS, potom vám veľa pomôže, ak máte v rukáve pár trikov.