Díszítse fel webhelyét ezekkel az animációs tippekkel és trükkökkel.
Az animációk és az átmenetek a webdesign fontos részét képezik. Ha finom animációkat ad hozzá weboldalához, az még vonzóbbá teszi azt. Az egyszerű animációk, például az animált ikonok, a kinetikus tipográfia és az animált logók segíthetnek a felhasználói élmény javításában. Tanuljon meg öt fantasztikus animációs trükköt, amelyek segítségével felpezsdítheti webhelyét.
1. Elem átalakítása lebegés közben
Az egyik általános tervezési gyakorlat az, hogy olyan elemet kell használni, amely interakció közben felnagyobbodik. Például érdemes lehet egy kicsit felfelé fordítani a gombokat, amikor valaki rámutatja az egeret. Ezt a CSS segítségével érheti el átalakítani ingatlan.
Feltéve, hogy van egy gombja:
<gomb>
Kattints ide
gomb>
Megadta a dokumentumtörzs és a gomb stílusát:
/* A gombot az oldal közepéhez igazítja */
test {
kijelző: Flex;
magasság: 100vh;
align-ites: központ;
indokolja-tartalom: központ;
háttérszín: fekete;
}/* Stílusok a gombok */
gomb {
párnázás: 1em 2em;
háttér: kék;
határ: 0;
szín: fehér;
határ-sugár: 0.25 rem;
kurzor: mutató;
betűméret: 2rem;
átmenet: átalakítani 500Kisasszony;
}
/* Lebegtető állapotok */
gomb:lebeg,
gomb:fókusz {
átalakítani: lefordítaniY(0.75 rem) 500Kisasszony;
}
Az utolsó blokknál a gombon állítja be az egérmutatót és a fókuszállapotokat. Mindkét állapotban lefordítja a gombot az Y tengely mentén 0,75 remmel. A gomb így nézne ki:
Ha az egeret a gombon mozgatja, az felfelé pöccint. Az átmenet fél másodpercet (500 ms) vesz igénybe. Ez egy olyan minta, amelyet nemcsak a gombokon, hanem más elemeken (pl. képeken) is megvalósíthat.
2. Több kulcskocka deklarálása egyetlen deklarációval
A CSS-animációk másik gyakori mintája, hogy ugyanazt az értéket többszörösen ismételgeti. Ez lehet egy adott szín, méret vagy tájolás. Ezt kihasználva érheti el CSS-kulcskocka-animációk több kulcskép egy deklarációval történő deklarálásával.
Vegye figyelembe az előző részben létrehozott gombot. Lehet, hogy több háttérszínt szeretne ismételni, amikor rákattint a gombra. De az animáció különböző szakaszaiban ugyanazt a színt szeretné áttekinteni. Lássuk, hogyan érhetjük el ezt a kódban.
Először is, csak akkor szeretné animálni a gombot, ha rákattint. Tehát létrehozna egy script.js fájl, amelyen belül elérheti a gombot, és átkapcsolhat egy osztályt a gombon, amikor rákattint:
const gomb = dokumentum.querySelector("gomb")
button.addEventListener("kattintás", (e) => {
button.classList.toggle('buli idő')
})
A querySelector segítségével elértük a gombot a weboldalról. Ha többet szeretne megtudni a DOM-bejárásról, olvassa el a következő bejegyzésünket hogyan lehet bejárni a DOM-ot JavaScript használatával.
A buli idő osztály aktivál egy animációt buli:
.buli idő {
élénkség: buli 2000Kisasszonyvégtelen;
}
Az animációnál pirossal kell kezdeni, és 25%-nál át kell térni a sárgára. Ezután 50%-nál visszatérne a pirosra, mielőtt 75%-nál visszaváltana a sárgára. Végül 100%-ban megelégedne egy sötétkék színnel:
@keyframes buli {
0%, 50% {
háttérszín: piros;
}
25%, 75% {
háttérszín: sárga;
}
100% {
háttérszín: hsl(200, 72%, 35%);
}
}
Ez a megközelítés nagyon hasznos a színek váltogatásához színalapú háttéren. Mivel egy változóban több kulcskockát is megismételhet, rendkívül egyszerűvé válik ugyanazon tulajdonság használata az animáció különböző szakaszaiban.
3. A @property használata egyéni tulajdonságok animálásához
Amint azt már Ön is tudja, a CSS-ben nem minden tulajdonság animálható. A hivatalos Mozilla dokumentáció frissített nyilvántartást vezet az összes animálható CSS-tulajdonságról. Ha egy nem animálható tulajdonságot szeretne animálni, akkor a legjobb megoldás az lenne, ha a @ingatlan irányelv.
Kezdje azzal, hogy módosítsa a gomb háttérszínét lineáris színátmenetre:
gomb {
// EgyébCSS
háttér: lineáris-gradiens(90deg, kék, zöld);
// EgyébCSS
}
Íme a kimenet:
Gyakran szeretné animálni a gomb színátmenetét. Bár vannak trükkök, amelyek segítségével mozgathatja a gradienst, valójában nem animálhatja azt. Ez azért van, mert háttér (szintén háttérkép) nem animálható tulajdonság. Ez az, ahol @ingatlan bejön.
A @ingatlan direktíva lehetővé teszi az egyéni tulajdonságok regisztrálását. Amikor használod @ingatlan, három értékkel kell megadnia, nevezetesen szintaxis, örököl, és kezdő érték:
@ingatlan --szín-1 {
szintaxis: "<szín>";
örököl: igaz;
kezdő érték: piros;
}
@ingatlan --szín-2 {
szintaxis: "<szín>";
örököl: igaz;
kezdő érték: kék;
}
Az első a kezdő tulajdonság, míg a második a céltulajdonság. Most ahelyett, hogy egy háttérképet (amelyet nem tud áttölteni), váltson át --szín-1 nak nek --szín-2 (egyéni tulajdonságai) egy másodperc alatt:
gomb {
átmenet: --szín-1 1000Kisasszony, --szín-2 1000Kisasszony;
}
Ez a technika hasznos, mert más testreszabásokat is hozzáadhat. Például késleltetést ad hozzá, hogy simább élményt nyújtson. A lehetőségek végtelenek.
4. Negatív animációs késleltetések használata
Az animáció késése döntő fontosságú a gördülékeny animációk létrehozásához. Lássunk egy példát erre a gyakorlatban. Ebben a részben adja hozzá a div elem 15 ponttal a gomb tetején:
<divosztály="pontok">
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
<divosztály="pont">div>
div>
Íme néhány alapvető stílus, amellyel minden gyermeket át lehet alakítani div egy pontba:
.pontok {
kijelző: Flex;
rés: .5rem;
margó-alsó: 20px;
}
.pont {
szélesség: 10px;
képarány: 1;
háttérszín: piros;
határ-sugár: 50%;
}
Itt a Flexbox segítségével vízszintes vonalba helyezzük a pontokat. Ha mélyre szeretne merülni a Flexboxban, tekintse meg a mi oldalunkat CSS Flexbox oktatóanyag.
Belül script.js, adja hozzá a pontok animációját kiváltó kódot. Te váltod a tánc osztály a pontokon:
button.addEventListener("kattintás", (e) => {
button.classList.toggle('buli idő')
// Új kód
dots.forEach((pont) => {
dot.classList.toggle('tánc')
})
})
A táncóra egy animációt aktivál, melynek címe emelkedik:
.pont.tánc {
élénkség: emelkedik 2000Kisasszonyvégtelenváltakozó;
}Ami az animációt illeti, egyszerűen fordítsa le a pontokat -100px az Y tengely mentén:
@keyframes emelkedik {
100% {
átalakítani: lefordítaniY(-100 képpont)
}
}Itt az ideje, hogy valami érdekeset csináljunk. Ahelyett, hogy a pontok egyszerre emelkednének, szeretné animálni a pontokat, hogy hullámszerűen folyjanak. Ennek eléréséhez hozzá kell adnia animáció-késleltetés a pontokhoz, és növelje az egyes pontokat 100 ms-al:
.pont:nth-child (1) {
animáció-késleltetés: 100Kisasszony;
}
.pont:nth-child (2) {
animáció-késleltetés: 200Kisasszony;
}
.pont:nth-child (3) {
animáció-késleltetés: 300Kisasszony;
}
.pont:nth-child (4) {
animáció-késleltetés: 400Kisasszony;
}
/* Folytasd, amíg el nem éred a 15. pontot */
Ez egy karcsú animációt hoz létre, ahol a pontok hullámos formában mozognak fel és le. A következő kép az animáció közepén lévő pontokat rögzíti:
Ne feledje, hogy ez problémás lehet, ami elvezet minket az ötödik tipphez.
5. Használja a prefers-redduced-motion funkciót a Preferences engedélyezéséhez
Mindig tartsd észben, hogy sokan nem szeretik a mozgásalapú animációkat. Valójában a legtöbb felhasználónak vannak olyan beállításai a böngészőben, amelyek kikapcsolhatják a mozgást. A mozgás elvonhatja az érzékszervek figyelmét, és súlyos esetekben hányingerhez vezethet.
Szerencsére ezt könnyedén elintézheti, ha az animációt becsomagolja a no-preferencia média lekérdezés, mint például:
@média(prefers-redduced-motion: no-preference) {
.pont.tánc {
élénkség: emelkedik 2000Kisasszonyvégtelenváltakozó;
}
}Most, ha engedélyezné előnyben részesíti a csökkentett mozgást böngészőjében, akkor az animáció nem fut.
További CSS-tippek és trükkök
A CSS tele van fantasztikus hackekkel, amelyek túlmutatnak az animációkon és az átmeneteken. Vannak például tippek és trükkök, amelyek segítségével az egész elrendezést karcsú és érzékeny lehet. A gyakorlatok segítségével vonzóbbá, elérhetőbbé és kellemesebbé teheti webhelyét. Ha a legjobb egy százalékos CSS-fejlesztő szeretnél lenni, akkor az sokat segít, ha van néhány trükk a tarsolyodban.
