Vytvořit SLICK UI Animace

Jan 19, 2026

jak

Stále častěji, návrháři a vývojáři uznávají důležitost návrhu pohybu v kontextu uživatelská zkušenost . Animace na webu již není způsob, jak potěšit a wow uživatelem, ale funkční nástroj, který dělá zkušenosti snadné, zábavné a nezapomenutelné. A existuje řada různých nástrojů a přístupů, od společnosti CSS Animace techniky pomocí bootstrapu nebo html.

Animace v kontextu uživatelských rozhraní je stále velmi novým polem. Není tam mnoho zdrojů, které učí osvědčené postupy nebo vykazují společné vzorce animace UI, které můžeme následovat. Většinu času je to o experimentování, Uživatelské testování a možná trochu pokusu a chyby.

15 Reagovat tutoriály webového designu

Takže v tomto tutoriálu vytvoříme něco, co nezaměňuje, následuje běžné vzory a je stylový. To bude sekce profilu týmu, které často vidíte na webových stránkách společnosti. Myšlenkou je ukázat o něco více informací o členském týmu / zaměstnance, když je každý z nich vznášel. Po celém tutoriálu budeme používat Codepen, ale samozřejmě můžete použít své vlastní oblíbené editor a vývojové prostředí. Nezapomeňte, že vytvoření složitějších stránek může změnit váš web hosting Potřebuje, takže jste si jisti, že máte službu, která pro vás funguje.

Chtěli byste přímočarý nástroj pro výrobu stránek? Použijte brilantní Webové stránky Builder. .

01. Získejte nastavení

Začněte otevřením kódů a vytvořením nového pera. Budeme používat Bootstrap 4 a Sass (.csss), takže se ujistěte, že v rámci nastavení obsahujete Bootstrap CSS a JS jako odkazy na prostředky a také nastavit CSS do SCSS. Dalším odkazem na zdroj budete muset přidat, je font úžasný, který budeme používat pro naše sociální ikony.

02. Vytvořit kontejnery, řádky a sloupce

Kontejnery jsou to, co bootstrap používá jako základní rozvržení prvek a jsou vyžadovány při použití výchozího systému mřížky. V rámci kontejnerů musíte přidat do řady. Řádky jsou obaly pro sloupce a můžete zadat počet sloupců, které chcete mimo možnosti 12 a jaký bod přerušení bude. V našem případě chceme prvek, který má středně velké přerušení a vyplní tři sloupce na šířku.

 & lt; divá třída = "kontejner" & gt;
 & lt; divová třída = "řádek" & gt;
 & lt; divové třídy = "col-md-3" & gt;
 & lt;! - Přidat obrázku odkaz a barva zde
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt;

03. Nastavte obrázek profilu a barvu

Prvním prvním prvkem UI profilu, se kterými začneme, bude pro člen týmu týmu a ona bude součástí modrého týmu. Barva bude zadána pomocí třídy zvané modré a skutečná barva bude nakonec definována pomocí proměnných SASS, které budeme dělat v pozdějším kroku. Pak budeme muset přidat fotku a dát to třídu nazvanou fotografie.

 & lt; div třídy = "tým modrý" & gt;
    & lt; dig class = "fotografie" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt;

04. Přidat jméno a název profilu

The beginning of creating a team member entry showing that a team member photo, job description and social media information. — Jeden poslední kus HTML přidá jméno, titul a sociální ikony

Poslední kousek HTML, který má být přidán, bude pro jméno, název a sociální ikony, které budou přidány pod poslední značkou DIV, který jsme právě přidali v posledním kroku. Pro sociální ikony budeme používat písmo úžasné a tyto budou umístěny v neuspořádaném seznamu.

05. Nastavte proměnné SASS

Pokud sledujete podél používání Codepen, pak budete mít již nainstalován SasS a připraveni jít. Stačí kliknout na ikonu Nastavení pera / a vyberte SCS jako předprocesor CSS. Pak můžeme jít dopředu a přidat do některých proměnných, které ukládají všechny naše barvy. Použili jsme RGBA jako hodnoty barev, které nám umožnily smysluplnější kontrolu všech krytých barev.

 $ Bluegradient: RGBA (103, 188, 223, .8);
$ LightGreen: RGBA (188, 219, 183, .5);
$ Green: RGBA (119, 180, 109, 0,5);
$ Green-Border: RGBA (171, 221, 164, 0,5);
$ modrá: RGBA (80, 205, 227, 1);
$ modrá-hranice: RGBA (147, 223, 236, 1);

06. Nahrát obrázek na pozadí

Aby se věci vypadaly přitažlivější, budeme umístit pěkný obrázek na pozadí na těle. Zde můžeme využít naši první sadu proměnných a dát pozadí obrázku příjemný gradient překrytí, který jde od světle zelené na modrou. Pak, aby náš obraz na pozadí plně reagoval, nastavíme výšku pohledu na 100VH.

 Tělo {
 Dosavadní stav techniky: lineární gradient (vpravo, $ lightgreen, $ bluegradient), url ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') centrum ne-repeat;
 Velikost na pozadí: kryt;
 Pozice: Relativní;
 Výška: 100VH;
 }

07. Vyberte si pozadí profilu a obrázek

Každý profil týmu bude mít stejné styly a třídní tým pro to bude použit. Pozadí bude bílé, veškerý obsah soustředěný a musíme se ujistit, že poloha je nastavena na relativní. Pak můžeme zahrnovat CSS pro profilový obraz. Pro dosažení nejlepších výsledků se ujistěte, že původní obraz, který používáte, má rozměry nejmenší než 200px čtverec. Změníme však výšku a šířku z nich v rámci Photo CSS pravidlo.

 .team {
 Polstrování: 30px 0 40px;
 Margin-top: 60px;
 Pozadí: #fff;
 Text-ALIGN: CENTER;
 Přetečení: skryté;
 Pozice: Relativní;
 kurzor: ukazatel;
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0,3);
 Photo {
 Displej: inline-blok;
 šířka: 130px;
 Výška: 130px;
 Pargin-dno: 50px;
 Pozice: Relativní;
 Z-index: 1;
 }
 }

08. Přidat animace

An image show that the rollover animation bringing down a coloured circle from the top of the frame. — Můžeme ovládat, kolik modrého kruhu lze vidět nastavením dna procenta pro jeho polohu

První kousek animace budeme dodat, bude v horní části našeho profilového prvku. Myšlenka je, že když se pohybujeme po celém prvku, modrý kruhový tvar bude oživit. Můžeme ovládat, kolik modrých můžeme vidět zadáním pozice toho, abyste měli dno procentu. Tak si hrajte s tímto procentem a získáte lepší představu o tom, jak to funguje. Nikdy nevíte: můžete dokonce objevit lepší efekt!

 .blue .Photo: před {
 obsah: "";
 šířka: 100%;
 Výška: 0px;
 Poloměr hranic: 50%;
 Pozadí: modrá $;
 Pozice: absolutní;
 dno: 130%;
 vpravo: 0;
 vlevo: 0;
 transformace: měřítko (3);
 Přechod: Všechny .3S lineární 0S;
}
.team: Hover .Photo: před {
 výška: 100%;
}

09. Animovat týmovou fotografii

Týmová fotografie je naším ústředním bodem v tomto UI a je pravděpodobně nejzřejmějším prvkem, který byste očekávali, že budete animovat v nějakém tvaru nebo formě. CSS budeme přidat do tohoto kroku, budou nejprve otočit fotografii do menšího kruhu, poté, když se vznášela, bude k němu přidáno světle modré ohraničení a fotografie bude snižovat spolu s hranicí. S přidané přechody získáme pěknou animaci tekutin.

 .blue .PIC: po {
 obsah: "";
 šířka: 100%;
 výška: 100%;
 Poloměr hranic: 50%;
 Pozadí: modrá $;
 Pozice: absolutní;
 top: 0;
 vlevo: 0;
 Z-index: 1;
}
.Team .Photo Img {
 šířka: 100%;
 Výška: Auto;
 Poloměr hranic: 50%;
 transformace: měřítko (1);
 Přechod: Všechna 0,9s snadnost 0s;
}
.blue: vznášet se .photo img {
 Box-Shadow: 0 0 0 14px $ modrá hranice;
 transformace: měřítko (0,6);
 }

10. Vyvolejte název profilu a pozici

An image showing the half completed rollover animation, showing the team member photo shrinking and generating a thick border. — Když se vznášela, do fotografie se přidá světle modré hranice

Název profilu a pozice potřebují trochu uklízení. Ty nebudou animované, ale to by nemělo zastavit vás v přidání vlastní animace k tomu, pokud chcete. Možná je mírně měkce na vznášejících, protože budete mít dostatek místa kvůli změně velikosti fotografie.

 .Profile-txt {
 okraj-dno: 30px;
 .title {
 Velikost písma: 2rem;
 Hmotnost písma: 700;
 Barva: # 333;
 Rozteč dopisů: 1,5px;
 Textová transformace: Využití;
 okraj-dno: 6px;
 }
 .pozice{
 Displej: blok;
 Velikost písma: 1rem;
 Barva: # 555;
 }
}

11. Přidat sociální ikony

Sociální ikony budou nejprve umístěny mimo spodní část stránky o -100PX. Pak, když se nad ním pohybují, spodní poloha bude nastavena na nulu a s přidaným přechodem, to nám poskytne pěknou hladkou animaci, protože se pohybuje zpět nahoru. Ikony budou mít svůj vlastní stav vznášek, stanovení jejich pozadí na bílou a ikonu na modrou.

 .blue .Sociální ikony {
 šířka: 100%;
 Seznam styl: žádný;
 Polstrování: 0;
 marže: 0;
 Pozadí: modrá $;
 Pozice: absolutní;
 Dno: -100px;
 vlevo: 0;
 Přechod: Všechna 0,6s lehkost;
 li {
 Displej: inline-blok;
 
 {
 Displej: blok;
 Polstrování: 8px;
 Velikost písma: 1rem;
 Barva: #fff;
 Textová dekorace: Žádný;
 Přechod: Všechna 0,5s lehkost;
 & amp;: vznášet se {
 barva: modrá $;
 Pozadí: #fff;
 }
 }
 }
}
.team: Hover .Sociální ikony {
 Dno: 0px;
}

12. Udělejte člen Green Team

Míchat věci trochu, můžeme začít přidat další členy do našeho týmu. Barva, kterou použijeme pro tuto další, bude zelená. Ale nejprve se vraťte zpět do sekce / souboru HTML a vše, co musíme udělat, je zkopírovat třídu Col-MD-3 - ne řádek - dolů na poslední značku DIV pod společenskými ikonami a vložit ji v.

 & lt, div class = "tým zelený" & gt;
 & lt; dig class = "fotografie" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt;

Jakmile změnili modrou třídu na zelenou, můžeme konečně přidat do všech CSS, které nám poskytne stejnou animaci.

 .Green: Hover .Photo Img {
 Box-Shadow: 0 0 0 14px $ Green-Border;
 transformace: měřítko (0,6);
 }
.ghoto: před {
 obsah: "";
 šířka: 100%;
 Výška: 0px;
 Poloměr hranic: 50%;
 pozadí: $ zelená;
 Pozice: absolutní;
 dno: 135%;
 vpravo: 0;
 vlevo: 0;
 transformace: měřítko (3);
 Přechod: Všechny .3S lineární 0S;
}
.Green .Sociální ikony {
 šířka: 100%;
 Seznam styl: žádný;
 Polstrování: 0;
 marže: 0;
 pozadí: $ zelená;
 Pozice: absolutní;
 Dno: -100px;
 vlevo: 0;
 Přechod: Všechna 0,6s lehkost;
 li {
 Displej: inline-blok;
 {
 Displej: blok;
 Polstrování: 8px;
 Velikost písma: 1rem;
 Barva: #fff;
 Textová dekorace: Žádný;
 Přechod: Všechna 0,5s lehkost;
 & amp;: vznášet se {
 barva: $ zelená;
 Pozadí: #fff;
 }
 }
 }
}

A krása tohoto přístupu je, že můžete opakovat podle potřeby pro mnoho různých barevných tříd, což vám umožní jemně motivovat vaše animace UI, jak je vyžadováno.

Pokud stavíte stránku s týmem, ujistěte se, že máte spolehlivé, bezpečné cloudové úložiště udržet věci soudržné.

Tento článek byl původně publikován v čísle 307 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Prodám vydání 307. nebo Přihlásit se k odběru Net. .

Chcete se dozvědět více o ins a outs z UI animace?

Steven Roberts is giving his talk CSS Animation: Beyond Transitions at Generate London from 19-21 September 2018. — Steven Roberts dává jeho rozhovor CSS animace: mimo přechody na Generovat Londýn

Máte-li zájem o další informace o tom, jak můžete vytvořit své stránky pop a jiskru pomocí elegantní ui animace, ujistěte se, že jste zvedli jízdenku Generovat Londýn .

Návrhář front-end a vývojář v současné době pracuje jako Creative Developer pro ASEMBLR.COM, Steven Roberts bude doručit svůj talk - CSS animace: mimo přechody - ve kterém vám ukáže nejlepší nástroje pro práci a znovu vytvořit některé z nejlepších animací Web musí nabídnout, při objevování možností a omezení animace s Jen CSS.

Generovat Londýn se koná od 19. do 21. září 2018. Dostaňte svou letenku .

Související články:

Jak používat animaci v mobilních aplikacích
Průvodce Pro Design UI
Průvodce začátečníkem pro navrhování animací rozhraní

Vytvořit SLICK UI Animace

01. Získejte nastavení

02. Vytvořit kontejnery, řádky a sloupce

03. Nastavte obrázek profilu a barvu

04. Přidat jméno a název profilu

05. Nastavte proměnné SASS

06. Nahrát obrázek na pozadí

07. Vyberte si pozadí profilu a obrázek

08. Přidat animace

09. Animovat týmovou fotografii

10. Vyvolejte název profilu a pozici

11. Přidat sociální ikony

12. Udělejte člen Green Team

Chcete se dozvědět více o ins a outs z UI animace?

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

44 z nejlepších IPAD zkratek a gest pro iPados 2020

Portrétní fotografie: Jak vzít perfektní portréty

Jak nakreslit paže

Vytvořte 3D krajinu v 6 jednoduchých krocích

Vytvořit specifické styly CSS a rozložení

Sculpt realistická anatomie v Zbrushu

Barva portrét jako staré mistři

Dostaňte se do mokrého mokra techniky

Kategorie