Creați widget-uri complet animate cu Shift.css

Animație web oferă o cale de a atrage atentia oamenilor și trageți-le mai departe într-un site web. Există o mulțime de instrumente acolo creați animații gratuite dar Shift.css este una dintre cele mai noi din grup.

E o free framework open source făcut pentru crearea animații dinamice în orice container. Și aceste animații nu sunt blocate într-o singură secvență. De fapt, puteți crea animații personalizate pentru fiecare element în bloc și aplicați-le într-o anumită ordine.

Schimbă pagina demo vă pot arăta mult mai bine decât pot explica în cuvinte.

Un lucru pe care îl veți observa este că fiecare element din interiorul containerului este un element HTML separat. Fie că este vorba despre un SVG sau o imagine sau orice altceva, puteți anima totul separat creați propriul dvs. efect de animație personalizat.

Biblioteca vine cu două fișiere, a .css și .js bibliotecă, și ambele trebuie să fie adăugat la capul dvs. de document.

Nu găsesc niciun repo GitHub pentru acest proiect, așa că va trebui descărcați direct fișierele de pe site-ul Web Shift.css.

Următorul pas este să defini un element container cu unele conținuturi. Numele de clase sunt importante, astfel încât fiecare element de animație trebuie să facă acest lucru au clasa .schimbare element aplicat.

Împreună cu aceste clase, puteți, de asemenea adăugați atribute de date HTML5 pentru a defini modul în care funcționează animația. Chiar acum sunt doar trei, dar ar trebui să fie suficiente pentru a personaliza un efect de animație complet.

1. date de animație: Numele animației
2. date de întârziere: Întârzierea totală (în secunde) înainte de începerea animației
3. date durată: Lungimea totală (în secunde) a animației

Numele de animație trebuie să fie a animație predefinită create pentru biblioteca Shift. Chiar acum există 15 nume de animație pentru a alege de la. Le puteți vedea în partea de jos a paginii de pornire Shift.css.

Doar copiaza si lipeste ce vrei tu în setarea numelui de animație și ar trebui să fiți bine să mergeți! De exemplu, dacă aș vrea să folosesc animația de decolorare de ieșire, aș adăuga date-animație = "shift_exitFade" ca atribut de date pentru orice element ar trebui să animați în acest fel. Peasy ușor.

Îmi doresc ca această bibliotecă să aibă mai multe opțiuni în JavaScript, deoarece ar permite dezvoltatorilor să aibă controlul mult mai mult asupra destinației de plasare și a funcțiilor. Dar pentru un cadru de animație simplu (și liber) nu pot să mă plâng.

Shift.css este perfect pentru dezvoltatori mai noi care vor să creeze stiluri mai complexe de animație fără a scrie codul verbose de la zero.