Vytvořit plně animované widgety s Shift.css

Webové animace nabízí cestu chytit pozornost lidí a nakreslit je dále webové stránky. Tam je spousta nástrojů vytvářet animace zdarma ale Shift.css je jedním z nejnovějších ve svazku.

To je volný open source framework pro tvorbu dynamické animace v libovolném kontejneru. A tyto animace nejsou zamknuty v jedné sekvenci. Vlastně můžete vytvořit vlastní animace každý prvek v bloku a aplikujte je v určitém pořadí.

Posunutí demo stránky může vám ukázat mnohem lépe, než můžu vysvětlit slovy.

Jedna věc, kterou si všimnete, je, že každý prvek uvnitř kontejneru je samostatný element HTML. Ať už je to SVG nebo obrázek nebo cokoliv jiného, ​​můžete vše animovat odděleně vytvořte si vlastní efekt animace.

Knihovna je dodávána se dvěma soubory, a .css a .js knihovnu a obě musí být přidány do hlavy dokumentu.

Nemohu najít žádné repo GitHub pro tento projekt, takže budete muset stahovat soubory přímo z webu Shift.css.

Dalším krokem je definovat prvek kontejneru s nějakým obsahem. Názvy tříd jsou důležité, takže každý animační prvek potřebuje mít třídu .posuvný prvek aplikovaný.

Spolu s těmito třídami můžete také přidávat atributy dat HTML5 definovat, jak animace funguje. Právě teď jsou jen tři, ale měly by stačit k přizpůsobení efektu plné animace.

1. animace dat: Název animace
2. zpoždění dat: Celkové zpoždění (v sekundách) před zahájením animace
3. trvání dat: Celková délka animace (v sekundách)

Název animace musí být a předdefinované animace vytvořen pro knihovnu Shift. Právě teď jsou Na výběr je 15 animačních jmen. Můžete je vidět v dolní části domovské stránky Shift.css.

Prostě kopírovat vložit cokoliv chceš do nastavení názvu animace a měli byste být dobrý! Například, kdybych chtěl použít animaci výstupu fade, přidal bych data-animation = "shift_exitFade" jako datový atribut k jakémukoliv prvku by měl takto animovat. Snadná hra.

Přál bych si, aby tato knihovna přišla s více možnostmi v JavaScriptu, protože by umožnila vývojářům mít mnohem větší kontrolu nad umístěním a funkcemi. Ale pro jednoduchý (a volný) rámec animace si nemohu stěžovat.

Shift.css je ideální pro novějších vývojářů kteří chtějí vytvořit složitější animační styly bez psaní verbose kódu od nuly.