Vytvořit krásné přechody přechodu s Granim.js
Web design je plný krásy a příjemného designu rozhraní. Některé funkce jsou funkční, zatímco jiné jsou jen pro show. Přechody přechodu jsou pouze pro přehlídku ale zabalí docela úder!
S Granim.js, můžete stavět vlastní přechody barevných přechodů , které vypadají hladce a dobře zapadají do jakékoli webové stránky.
Můžeš najít banda vlastních příkladů na hlavních příkladech stránky s mnoha různými styly od jednoduchých přechodů po složitější animace pomocí obrázků na pozadí.
Granim je jediná JS knihovna, kterou znám řešení přechodových přechodů. To je otázka, o které jsem vždycky přemýšlel a nikdy jsem nenašel velkou odpověď. Granim je ideálním řešením a je to postavený na vanilce JavaScript, tak to může běžet podél jQuery nebo nějaká jiná JS knihovna.
Prostě drop the granim.js souboru začít. Můžete si buď stáhnout kopii z GitHubu, nebo zkopírovat z živého CDN.
Tady je základní vzorek kódu z repo GitHub:
Věci se mohou dostat mnohem komplikovanější, než byste měli kopejte do příkladů se dozvědět více. Najdeš kódu v každém příkladu takže můžeš vytvořit přechody přechodů pro pozadí obrázku a dokonce i masky obrázků.
Obrazové masky lze použít pro logo, například obrázek PNG, který se skrývá za přechodem. To vám umožní vytvořit logo animované pomocí JS kde gradient pomalu přechází celým textem.
Poznámka: Tento příklad trvá mnoho kódu JS / CSS takže to není jednoduchá implementace.
Ale čím více budete s Granimem cvičit, tím snadnější bude nastavení a přizpůsobení. A to je jediná opravdová přechodová knihovna online, je to naprosto nejlepší řešení pro každý projekt.
Knihovna je stále často aktualizována, takže můžete zkontrolovat kartu otázek pro více informací.
To je docela malá knihovna takže není příliš mnoho věcí, které by se daly pokazit nebo je třeba aktualizovat. To je to, co dělá Granim.js spolehlivým řešením pro všechny malé i velké stránky.
Na stáhnout kopii navštivte stránku vydání na GitHub nebo si vezměte kopii .js soubor přímo z cdnjs. A k zobrazit zdroj na živém příkladu nahlédněte do tohoto demo CodePen vytvořeného Jonathanem Schneiderem.
