Přidat UI animace na vaše stránky

Sep 12, 2025

jak

Většina lidí vidí uživatelské rozhraní denně, ať už je to uvnitř mobilní aplikace nebo na webových stránkách, takže je důležité, aby se to při vytváření (a Webové stránky Builder. učiní to pro vás jednoduché), a pokud je můžete oživit s některými CSS Animace , všechno lepší.

Prozkoumejte novou hranici animace CSS

Zatímco budova pro web, zejména pokud jde o animaci, musíte zvážit věci jako podpora prohlížeče a výkon (slušný web hosting pomůže zde). V tomto tutoriálu vás budeme chodit dvěma z nejlepších řešení pro vytváření animací a přechodů UI.

Budeme používat kombinaci CSS a Greensock. (GSAP). Všichni jsme si vědomi CSS, ale některé z vás si nemusí být vědomi platformy Griveck. Greensock je JavaScript rámec, který vám umožní snadno vytvářet ohromující animace s HTML prvky pomocí několika řádků kódu.

Obrazy a loga mají zejména mnohem více v posledních několika letech. Jak často používáme emojis spíše než text? Zdá se, že mobilní navigace používají spíše ikony než text a časem uživatelé přijdou vědět, kde nás bude vezmou. Začneme začít vytvořením animovaného navigačního panelu právě pomocí log. Když se přejdete nad každým, bude animovat do konečného stavu, který bude vypadat podobně jako tento snímek. Dostal spoustu médií přidat? Zpět cloudové úložiště .

UI animations: icons — Máme šest navigačních ikon a jeden z nich se zobrazí, jaký stav vznášejícího se bude vypadat, jakmile je animace dokončena

Sestavte navigaci

Za prvé, budeme vytvářet nový soubor index.html a nastavit naši navigační oblast spolu se šesti odkazy. Každý odkaz bude tvořen ikonou z ioniconů. Budeme muset postoupit do každé třídy.

 & lt; divá třída = "navigačníbar" & gt;
& lt; a href = "#" třída = "navlogo ion-ios-hvězdičkový obrys" & gt; & lt; / a & gt;
& lt; a href = "#" třída = "navlogo ion-ios-osnova" & gt; & lt; / a & gt;
& lt; a href = "#" třída = "navlogo ion-ios-chatboxes-osnovy" & gt; & lt; / a & gt;
& lt; a href = "#" třída = "navlogo ion-ios-home-obrys" & gt; & lt; / a & gt;
& lt; a href = "#" třída = "navlogo ion-ios-pie-obrys" & gt; & lt; / a & gt;
& lt; a href = "#" třída = "navlogo ion-ios-převodovka" & gt; & lt; / a & gt;
& lt; / div & gt;

Podrobně nebudeme pokrývat celý dokument HTML nebo CSS, ale můžete Získejte seznam plného kódu z GitHub .

Dále budeme muset vytvořit soubor CSS, který je nazýván stylu.css a pak vložit následující řádek kódu na import ionicons:

 @import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Nyní budeme nastavit třídu Navlogo. Pro naše navigační snímky uvnitř stylového serveru. Zde nastavíme pozici, výšku, velikost písma atd.

 .NAVLOGO {
  Pozice: Relativní;
  Velikost písma: 40px;
  šířka: 75px;
  marže: 40px;
  Výška: 75px;
  Výška čáry: 75px;
  Displej: inline-blok;
  Barva: #fff;
}

.NAVLOGO: po {
  Pozice: absolutní;
  top: 0;
  Dno: 0;
  vlevo: 0;
  vpravo: 0;
  Hranice: 2px Solid # E6E6E6;
  obsah: '';
  Z-index: -1;
  Poloměr hranic: 50%;
}

Dále potřebujeme nastavit animaci pro naše .NAVLOGO. živel. Zde vytvoříme účinky rotace a přechodu, stejně jako změna barvy prvku na vznášení.

 .NAVLOGO: dříve,
.NAVLOGO: po {
  -WebKit-přechod: Všechna 0,45s snadnost-in-out;
  Přechod: Všechna 0.45s Snadno-in-out;
}
.NAVLOGO: Hover,
.NAVLOGO: aktivní,
.NAVLOGO.HOVER {
  Barva: # C0392B;
}
.NAVLOGO: vznášení: po,
.NAVLOGO: aktivní: po,
.NAVLOGO.HOVER: po {
  Barva hranic: transparentní # C0392B;
  -WebKit-transformace: otočení (360deg);
  transformace: otočení (360deg);
}

Nakonec budeme muset přidat událost, která odstraňuje třídu vznášejícího se, když se myš už nepřijímá nad našimi logy. To je, aby se ujistil, že naše logo vychází z animace. Vytvořit nový soubor JavaScriptu s názvem Main.js a zadejte následující kód:

 $ (". Hover"). Mousealeave (
  funkce () {
    $ (this) .removeclass ("vznášení");
  }
);

Naše navigace je nyní připravena jít, kromě přidávání některých hypertextových odkazů. Podařilo se nám to dosáhnout jen pomocí CSS3.

Vytvořit a animovat tlačítka na zatížení

UI animations: animated buttons — Tlačítka se zobrazí jeden po druhém s jedním druhým zpožděním v mezi nimi. Greensock umožňuje to udělat s libovolným prvkem HTML

Nyní přidáme čtyři knoflíky na naši stránku a používat knihovnu Greensock, aby se pomalu přivedla do každého tlačítka, jeden po druhém s jedním druhým zpožděním. To vytvoří pěkný přechodový efekt.

Za prvé, budeme muset znovu otevřít soubor index.html a vytvořit naši sekci tlačítka pomocí níže uvedeného kódu:

 & lt, div id = "buttonarea" & gt;
& lt; Třída tlačítka = "ANIBUTTON" & GT; Změnit barvu pozadí & lt; / tlačítko & gt;
Třída tlačítka = "ANIBUTTON" & GT; volba 1 & lt; / tlačítko & gt;
Třída tlačítka = "Anibutton" & GT; volba 2 & lt; / tlačítko & gt;
Třída tlačítka = "ANIBUTTON" & GT; volba 3 & lt; / tlačítko & gt;
& lt; / div & gt;

Pak musíme nastavit odkaz na knihovnu Greensock uvnitř Head & GT; sekce.

 Script src = "https://cdnjs.cloudflae.com/AJAX/libs/gsap/1.19.1/twewenmax.min.js" & gt;

Konečně musíme nastavit naši animaci. To bude trvat pouze jeden řádek kódu. Staggerfrom. je funkce, která bude stagnají čas začátku našeho prvku. V našich závorkách určujeme název prvku. V tomto případě by to bylo .anibutton. . Potřebujeme také nastavit dobu trvání a v tomto případě je nastaven na jednu sekundu mezi každým Anibutton. živel.

 TweenMax.StagerFrom (".". Anibutton ', 1, {Opacity: 0}, 1);

Background a Element Color Přechod

UI animations: colour transition — To je způsob, jak se UI postará o přechod na pozadí a tlačítko přechod z jedné barvy do druhé

Další věc, na které se podíváme na přechod webových stránek pozadí a tlačítka z jedné barvy do druhé. Často narazíme na tuto funkci na webových stránkách, i když by to určitě zajímalo o věci, jako je přístupnost nebo pro preference webové aplikace, když uživatel může chtít nastavit vlastní barevné schéma.

Ujistěte se, že máte barvu pozadí a barvu hranice a textu nastavit pro vaši stránku v souboru Style.css.

 .anibutton {
Hranice: 2px Solid # 000;
Barva: # 000;
}

Dále vytvoříme funkci JavaScriptu pro nastavení našich různých přechodů barev Greensock.

 Funkce ChangeBackground ()
{
   Tweenmax.to ("tělo", 3, {backgroundImage: "lineární gradient (doleva, # 646580 # 212121)"});
   TweenMax.To (". Anibutton", 3, {Color: "# FFF"});
   TweenMax.to (". Anibutton", 3, {Border: "2px Solid #FFF"});
}

Jdeme na další temný režim, podíváme se zde, takže pozadí bude tmavé, ale tlačítka se zobrazí světlo. První řádek kódu změní barvu pozadí na tmavší variaci po dobu tří sekund. Druhá a třetí linie změní barvu a okraj textu na bílou po dobu tří sekund.

Konečně budeme muset zavolat změnit pozadí() Funkce z jedné z našich tlačítek nalezených v souboru index.html.

 Třída tlačítka = "Anibutton" onclick = "ChangeBackground ()" & gt; Změnit pozadí & lt; / tlačítko & gt;

Projekt je nyní připraven běžet. Samozřejmě, můžete jít dál přidáním nových prvků a změna barevného stylu pro ty, taky.

Tento článek byl původně publikován v čísle 309 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Koupit problém 309 zde nebo Přihlásit se zde .

Související články:

Animovat a přepínač titulů s CSS
5 tipů pro super-rychlé css
Úvod do vlastností CSS

Přidat UI animace na vaše stránky

Sestavte navigaci

Vytvořit a animovat tlačítka na zatížení

Background a Element Color Přechod

jak - Nejoblíbenější články

Jak komprimovat snímky: průvodce web designer

Speed Sculpt stvoření v Zbrushu

Jak vytvořit aplikaci AR

Vytvořit animovaný textový textový efekt

Jak malovat realistické vlny ve Photoshopu

Sculpt realistická anatomie v Zbrushu

Pravidla citlivé webové typografie

Modelování kosmické lodi pro herní přehrávač

Kategorie