Vylepšete svůj web pomocí těchto animačních tipů a triků.

Animace a přechody jsou důležitou součástí webdesignu. Přidáním jemných animací na vaši webovou stránku bude poutavější. Jednoduché animace, jako jsou animované ikony, kinetická typografie a animovaná loga, mohou pomoci zlepšit uživatelský zážitek. Naučte se pět úžasných animačních triků, které vám mohou pomoci oživit váš web.

1. Transformace prvku při najetí myší

Jednou z běžných návrhových praktik je mít prvek, který se při interakci s ním zvětšuje. Můžete například chtít přeložit tlačítka trochu nahoru, když na ně někdo najede myší. Toho lze dosáhnout pomocí CSS přeměnit vlastnictví.

Za předpokladu, že máte tlačítko:

<knoflík>
 Klikni na mě
knoflík>

Nastavili jste styl těla dokumentu i tlačítka:

/* Zarovná tlačítko na střed stránky */
tělo {
Zobrazit: flex;
výška: 100vh;
zarovnat-položky: centrum;
ospravedlnit-obsah: centrum;
barva pozadí: Černá;
}
/* Upraví styl tlačítka */
knoflík {
vycpávka: 1em 2em;
Pozadí: modrý;
okraj: 0; 
barva: bílý;
hraniční poloměr: 0.25rem;
kurzor: ukazatel;
velikost písma: 2rem;
přechod: přeměnit 500slečna;
}





instagram viewer

/* Stavy kurzoru */
knoflík:vznášet se,
knoflík:soustředit se {
přeměnit: přeložitY(0.75rem) 500slečna;
}

S posledním blokem nastavujete na tlačítku stavy kurzoru a zaměření. V obou stavech posunete tlačítko podél osy Y o 0,75rem. Tlačítko by vypadalo takto:

Když na tlačítko najedete myší, švihne směrem nahoru. Přechod trvá půl sekundy (500 ms). Toto je vzor, ​​který můžete implementovat nejen na svá tlačítka, ale i na další prvky (např. obrázky).

2. Deklarace více klíčových snímků jednou deklarací

Dalším běžným vzorem v animacích CSS je opakované opakování stejné hodnoty. Může to být konkrétní barva, velikost nebo orientace. Toho můžete dosáhnout pomocí Animace klíčových snímků CSS deklarováním více klíčových snímků jednou deklarací.

Zvažte tlačítko, které jste vytvořili v předchozí části. Možná budete chtít při kliknutí na tlačítko iterovat několik barev pozadí. Ale také chcete přejít stejnou barvu v různých fázích animace. Podívejme se, jak toho dosáhnout v kódu.

Za prvé, chcete tlačítko animovat pouze po kliknutí. Takže byste vytvořili a script.js soubor, ve kterém přistoupíte k tlačítku a po kliknutí na tlačítko přepnete třídu:

konst tlačítko = dokument.querySelector("knoflík")
button.addEventListener("kliknout", (e) => {
 button.classList.toggle('čas na party')
})

Pro přístup k tlačítku z webové stránky jsme použili querySelector. Chcete-li se dozvědět více o DOM traversal, přečtěte si náš příspěvek na jak procházet DOM pomocí JavaScriptu.

The čas na party třída aktivuje animaci s názvem oslava:

.čas na party {
animace: oslava 2000slečnanekonečný;
}

U animace chcete začít s červenou a přejít na žlutou na 25 %. Pak byste se vrátili k červené na 50 % a pak byste se vrátili zpět ke žluté na 75 %. Nakonec se na 100 % spokojíte s tmavě modrou barvou:

@klíčové snímky oslava {
 0%, 50% {
barva pozadí: Červené;
 } 
 25%, 75% {
barva pozadí: žlutá;
 }
 100% {
barva pozadí: hsl(200, 72%, 35%);
 }
}

Tento přístup je docela užitečný pro střídání barev na barevném pozadí. Protože můžete opakovat více klíčových snímků v jedné proměnné, je velmi snadné používat stejnou vlastnost v různých fázích animace.

3. Použití @property k animaci uživatelských vlastností

Jak už možná víte, ne všechny vlastnosti v CSS jsou animovatelné. Oficiální Dokumentace Mozilly uchovává aktualizovaný záznam všech animovatelných vlastností CSS. Pokud chcete animovat neanimovatelnou vlastnost, pak by nejlepším řešením bylo použít @vlastnictví směrnice.

Začněte změnou barvy pozadí tlačítka na lineární přechod:

knoflík {
 // jinýCSS
Pozadí: lineární gradient(90stupně, modrý, zelená);
 // jinýCSS
}

Zde je výstup:

Často byste chtěli animovat barevný přechod na tlačítku. I když existují triky, které můžete použít k posunutí přechodu, ve skutečnosti jej nemůžete animovat. To je proto, že Pozadí (jakož i obrázek na pozadí) není animovatelná vlastnost. To je kde @vlastnictví přichází v.

The @vlastnictví direktiva umožňuje registrovat uživatelské vlastnosti. Když použijete @vlastnictví, musíte mu poskytnout tři hodnoty, a to syntax, dědí, a počáteční hodnota:

@vlastnictví --barva-1 {
syntax: "<barva>";
dědí: skutečný;
počáteční hodnota: Červené;
}
@vlastnictví --barva-2 {
syntax: "<barva>";
dědí: skutečný;
počáteční hodnota: modrý;
}

První je počáteční vlastnost, zatímco druhá je cílová vlastnost. Nyní byste místo přechodu obrázku na pozadí (který nemůžete přecházet) přecházeli --barva-1 na --barva-2 (vaše vlastní vlastnosti) za jednu sekundu:

knoflík {
přechod: --barva-1 1000slečna, --barva-2 1000slečna;
}

Tato technika je užitečná, protože můžete přidat i další přizpůsobení. Můžete například přidat zpoždění, aby byl zážitek plynulejší. Možnosti jsou nekonečné.

4. Použití negativních zpoždění animace

Zpoždění animace je zásadní pro vytváření plynulých animací. Podívejme se na příklad v praxi. V této části přidejte a div prvek s 15 tečkami v horní části tlačítka:

<divtřída="tečky">
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
<divtřída="tečka">div>
div>

Zde je několik základních stylů, které promění každé dítě div do tečky:

.tečky {
Zobrazit: flex;
mezera: .5rem;
okraj-dole: 20px;
}
.tečka {
šířka: 10px;
poměr stran: 1;
barva pozadí: Červené;
hraniční poloměr: 50%;
}

Zde používáme Flexbox k umístění teček do vodorovné linie. Chcete-li se ponořit hluboko do Flexboxu, můžete se podívat na naše Návod CSS Flexbox.

Uvnitř script.js, přidejte kód, který spustí animaci teček. Přepínáte tanec třída na tečkách:

button.addEventListener("kliknout", (e) => {
 button.classList.toggle('čas na party')
// Nový kód
 dots.forEach((tečka) => {
 dot.classList.toggle('tanec')
 })
})

Taneční lekce aktivuje animaci s názvem stoupat:

.tečka.tanec {
animace: stoupat 2000slečnanekonečnýstřídat;
}

Pokud jde o animaci, jednoduše přeložte tečky -100 pixelů podél osy Y:

@klíčové snímky stoupat {
 100% {
přeměnit: přeložitY(-100 pixelů)
 }
}

Nyní je čas udělat něco zajímavého. Místo toho, aby tečky stoupaly současně, chcete animovat tečky tak, aby plynuly jako vlna. Abyste toho dosáhli, musíte přidat animace-zpoždění na tečky a zvyšujte každý bod o 100 ms:

.tečka:n-té dítě (1) {
animace-zpoždění: 100slečna;
}
.tečka:n-té dítě (2) {
animace-zpoždění: 200slečna;
}
.tečka:n-té dítě (3) {
animace-zpoždění: 300slečna;
}
.tečka:n-té dítě (4) {
animace-zpoždění: 400slečna;
}
/* Pokračujte, dokud nedosáhnete 15. tečky */

To vytváří elegantní animaci, kde se tečky pohybují nahoru a dolů ve zvlněné podobě. Následující obrázek zachycuje tečky uprostřed animace:

Mějte na paměti, že to může být problematické, což nás přivádí k pátému tipu.

5. K aktivaci předvoleb použijte prefers-reduced-motion

Vždy mějte na paměti, že mnoho lidí nemá rádo animace založené na pohybu. Ve skutečnosti má většina uživatelů v prohlížeči předvolby, které mohou pohyb vypnout. Pohyb může odvádět pozornost smyslů a ve vážných případech vést k nevolnosti.

Naštěstí se o to můžete snadno postarat tím, že svou animaci zabalíte do a žádná preference mediální dotaz takto:

@media(prefers-reduced-motion: no-preference) {
.tečka.tanec {
animace: stoupat 2000slečnanekonečnýstřídat;
 }
}

Nyní, pokud byste měli povolit preferuje-redukovaný-pohyb ve vašem prohlížeči by se animace nespustila.

Přečtěte si další tipy a triky CSS

CSS je plné úžasných hacků, které jdou nad rámec animací a přechodů. Existují například tipy a triky, jak vytvořit elegantní a responzivní celé rozvržení. Tyto postupy vám mohou pomoci učinit váš web poutavější, přístupnější a příjemnější na procházení. Pokud chcete být špičkovým vývojářem CSS o jednom procentu, pak vám hodně pomůže mít v rukávu pár triků.