Vytvorte plne animované miniaplikácie pomocou funkcie Shift.css

Webová animácia ponúka spôsob, ako upútajte pozornosť ľudí a nakresliť ich ďalej do webovej stránky. K dispozícii je veľa nástrojov vytvorte zadarmo animácie ale Shift.css je jedným z najnovších vo zväzku.

Je to free open source framework vytvorené na vytvorenie dynamické animácie v ľubovoľnom kontajneri. A tieto animácie nie sú uzamknuté v jednej sekvencii. Môžete skutočne vytvoriť vlastné animácie pre každý prvok v bloku a použite ich v určitom poradí.

Ukážka demo stránky môže vám ukázať oveľa lepšie, ako môžem vysvetliť slovami.

Jedna vec, ktorú si všimnete, je, že každý prvok vo vnútri kontajnera je samostatný prvok HTML. Či už je to SVG alebo obrázok alebo niečo, môžete animovať všetko samostatne vytvorte vlastný efekt animácie.

Knižnica je vybavená dvoma súbormi, a .css a .js knižnica a obaja musia byť pridané do hlavičky dokumentu.

Pre tento projekt nemôžem nájsť žiadne repo GitHub, takže budete musieť stiahnite si súbory priamo z webovej stránky Shift.css.

Ďalším krokom je definujte kontajnerový prvok s určitým obsahom. Názvy tried sú dôležité, aby každý prvok animácie potreboval mať triedy .shift-element aplikovaný.

Spolu s týmito triedami môžete tiež pridať atribúty údajov HTML5 definovať, ako animácia funguje. Práve teraz sú len tri, ale mali by stačiť na prispôsobenie plného animačného efektu.

1. údaje animácie: Názov animácie
2. Data-delay: Celkové oneskorenie (v sekundách) pred začiatkom animácie
3. dát trvania: Celková dĺžka (v sekundách) animácie

Názov animácie musí byť a preddefinovaná animácia vytvorený pre knižnicu Shift. Práve teraz sú 15 animácií, z ktorých si môžete vybrať. Môžete ich vidieť v spodnej časti domovskej stránky Shift.css.

proste kopírovať vložiť čokoľvek chceš do nastavenia názvu animácie a mali by ste byť dobré ísť! Napríklad, ak by som chcel používať animáciu, ktorá by sa mohla zmeniť, tak by som pridal dát animácie = "shift_exitFade" ako dátový atribút akémukoľvek prvku, ktorý by mal takto animovať. Ľahunké.

Chcem, aby táto knižnica prišla s viacerými možnosťami v jazyku JavaScript, pretože by umožnila vývojárom oveľa väčšiu kontrolu nad umiestnením a funkciami. Ale pre jednoduchý (a voľný) animačný rámec sa nemôžem sťažovať.

Shift.css je ideálny pre noví vývojári ktorí chcú vytvoriť zložitejších animačných štýlov bez písania úplného kódu od začiatku.