Obsah
Väčšina ľudí vidí používateľské rozhrania každý deň, či už v mobilnej aplikácii alebo na webe, takže je dôležité, aby ste to pri vytváraní vytvorili správne (tvorca webu vám to zjednoduší) a či ich môžete oživiť animáciou CSS. , o to lepšie.
- Preskúmajte novú hranicu animácie CSS
Pri vytváraní webu, najmä pokiaľ ide o animáciu, musíte brať do úvahy veci ako podpora a výkon prehliadača (tu vám pomôže slušný webhosting). V tomto tutoriále vás prevedieme dvoma z najlepších riešení na vytváranie animácií a prechodov používateľského rozhrania.
Budeme používať kombináciu CSS a GreenSock (GSAP). Všetci vieme o CSS, ale niektorí z vás nemusia poznať platformu GreenSock. GreenSock je rámec JavaScriptu, ktorý vám umožní ľahko vytvárať úžasné animácie s prvkami HTML pomocou niekoľkých riadkov kódu.
Obzvlášť obrázky a logá vynikli za posledných pár rokov oveľa viac. Ako často používame emodži namiesto textu? Zdá sa, že mobilné navigácie používajú skôr ikony ako text a používatelia časom zistia, kam nás každá zavedie. Začneme vytvorením animovanej navigačnej lišty iba pomocou log. Keď umiestnite kurzor myši na každú z nich, dôjde k jej animácii do konečného stavu, ktorý bude vyzerať podobne ako táto snímka obrazovky. Máte veľa médií na pridanie? Zálohujte ho v cloudovom úložisku.
Zostavte navigáciu
Najskôr vytvoríme nový súbor index.html a nastavíme našu navigačnú oblasť spolu so šiestimi odkazmi. Každý odkaz bude tvorený ikonou prevzatou z Ionicons. Každému budeme musieť priradiť triedu.
div class = “navigationbar”> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> / div>
Celý dokument HTML alebo CSS sa nebudeme podrobne venovať, ale celý zoznam kódov môžete získať na GitHub.
Ďalej budeme musieť vytvoriť súbor CSS, ktorý sa volá style.css a potom vložiť nasledujúci riadok kódu na import Ionicons:
@import url (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
Teraz nastavíme triedu navlogo pre naše navigačné obrázky v šablóne so štýlmi. Tu nastavíme pozíciu, výšku, veľkosť písma atď.
.navlogo {pozícia: relatívna; veľkosť písma: 40px; šírka: 75px; okraj: 40px; výška: 75px; výška riadku: 75px; displej: vložený blok; farba: #fff; } .navlogo: za {pozíciou: absolútna; hore: 0; dole: 0; vľavo: 0; vpravo: 0; orámovanie: 2px pevné # e6e6e6; obsah: ““; z-index: -1; polomer hranice: 50%; }
Ďalej musíme nastaviť animáciu pre našu .navlogo element. Tu vytvoríme efekty rotácie a prechodu, ako aj zmenu farby prvku pri umiestnení kurzora myši.
.navlogo: before, .navlogo: after {-webkit-transition: všetkých 0,45 s easy-in-out; prechod: všetkých 0,45 ľahkého vstupu; } .navlogo: vznášať sa, .navlogo: aktívne, .navlogo.hover {farba: # c0392b; } .navlogo: hover: after, .navlogo: active: after, .navlogo.hover: after {border-color: transparent # c0392b; -webkit-transformácia: otočenie (360 stupňov); transformácia: otočenie (360 stupňov); }
Nakoniec budeme musieť pridať udalosť, ktorá odstráni triedu vznášania, keď už myš na našich logách nestáva. To zaisťuje, že naše logo bude vychádzať z jeho animácie. Vytvorte nový súbor JavaScript s názvom main.js a potom zadajte nasledujúci kód:
$ („. Hover“). Mouseleave (function () {$ (this) .removeClass („hover“);});
Naša navigácia je teraz pripravená na použitie, okrem pridania niektorých hypertextových odkazov. Toto sa nám podarilo dosiahnuť iba použitím CSS3.
Vytvorte a animujte tlačidlá pri načítaní
Teraz na našu stránku pridáme štyri tlačidlá a pomocou knižnice GreenSock pomaly každé tlačidlo postupne privádzame, jedno po druhom s oneskorením jednej sekundy. Týmto sa vytvorí pekný prechodový efekt.
Najskôr budeme musieť znova otvoriť súbor index.html a vytvoriť našu sekciu tlačidiel pomocou nižšie uvedeného kódu:
div id = “buttonarea"> tlačidlo> Zmeniť farbu pozadia / tlačidlo> tlačidlo> možnosť 1 / tlačidlo> tlačidlo> možnosť 2 / tlačidlo> tlačidlo> možnosť 3 / tlačidlo> / div>
Potom musíme nastaviť odkaz na knižnicu GreenSock vo vnútri sekcie head>.
script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"> / script>
Nakoniec musíme nastaviť našu animáciu. Bude to trvať iba jeden riadok kódu. StaggerFrom je funkcia, ktorá posunie čas začatia nášho prvku. V našich zátvorkách určujeme názov prvku. V takom prípade by to bolo .anibutton. Musíme tiež nastaviť dĺžku trvania, ktorá je v tomto prípade medzi každou nastavená na jednu sekundu anibutton element.
TweenMax.staggerFrom ('. Anibutton', 1, {opacity: 0}, 1);
Prechod farby pozadia a prvkov
Ďalšia vec, na ktorú sa pozrieme, je prechod pozadia a tlačidiel webových stránok z jednej farby na druhú. S touto funkciou sa na webových stránkach často nestretávame, aj keď by bola určite zaujímavá napríklad pre prístupnosť alebo pre preferencie webových aplikácií, keď by si užívateľ chcel nastaviť vlastnú farebnú schému.
Uistite sa, že máte pre svoju stránku v súbore style.css nastavenú farbu pozadia a orámovania a farbu textu.
.anibutton {orámovanie: 2px pevné # 000; farba: # 000; }
Ďalej vytvoríme funkciu JavaScript na nastavenie našich rôznych farebných prechodov GreenSock.
function changeBackground () {TweenMax.to (“body", 3, {backgroundImage: "linear-gradient (to left, # 646580, # 212121)"}); TweenMax.to (". anibutton", 3, {color: „#fff“}); TweenMax.to („. Anibutton“, 3, {ohraničenie: „2px plné #fff“});}
Chystáme sa tu hľadať viac tmavého režimu, takže pozadie bude tmavé, ale tlačidlá sa budú javiť svetlé. Prvý riadok kódu zmení farbu pozadia na tmavšiu variáciu v priebehu troch sekúnd. Druhý a tretí riadok zmení farbu a orámovanie textu na biely po dobu troch sekúnd.
Nakoniec budeme musieť zavolať zmena pozadia() funkcie z jedného z našich tlačidiel nájdených v súbore index.html.
button onclick = "changeBackground ()"> Zmeniť pozadie / tlačidlo>
Projekt je teraz pripravený na spustenie. Samozrejme, môžete ísť oveľa ďalej, keď pridáte nové prvky a zmeníte farebný štýl aj pre tie.
Tento článok bol pôvodne publikovaný v čísle 309 sieť, najpredávanejší časopis pre webdizajnérov a vývojárov na svete. Kúpte si číslo 309 tu alebo prihlásiť sa na odber tu.
