Share
Mulți oameni doresc să adauge animații subtile pe site-ul lor ca răspuns la clicurile sau alte acțiuni ale vizitatorilor lor. Cu toate acestea, nu toată lumea este bine cunoscut în utilizarea CSS sau JavaScript. Unii știu doar cum să modificați codul HTML și să reflectați modificările pe site.
În general, aceasta este partea în care dezvoltatorii preiau și adaugă JavaScript și CSS necesare pentru a face site-ul dvs. să iasă în evidență. Cu toate acestea, dacă doriți să puteți crea singur un site animat, fără codificare, o bibliotecă numită AniJS ar ajuta foarte mult.
AniJS vă permite să creați stil animat pentru site-ul dvs. fără codare JavaScript sau CSS! Puteți specifica toate animațiile cu HTML utilizând o simplă Dacă-Pe-Do-La sintaxă.
Înainte de a putea începe animarea elementelor de pe pagina dvs. Web utilizând data-anijs atribute, va trebui să includeți fișierele necesare. Trei fișiere diferite sunt necesare pentru a accesa toate funcționalitățile AniJS. Aceste fișiere sunt biblioteca JS de bază, fișierul CSS pentru animații și un alt fișier JavaScript helper pentru utilizarea sintaxei speciale AniJS ca $ addClass, $ toggleClass, și $ removeClass.
De asemenea, puteți instala biblioteca folosind Bower executând următoarea comandă:
bower install anijs - salvează
Odată ce ați inclus toate fișierele necesare, elementele de pe pagina dvs. web vor fi pregătite pentru animație.
În forma sa de bază, AniJS folosește următoarea sintaxă pentru a anima anumite elemente bazate pe orice eveniment.
Dacă (orice eveniment se întâmplă), On (orice element), Do (ceva animat, adaugă / elimină clasa), To (acest element sau alt element)
Aici Dacă parte specifică evenimentul care va declanșa animația sau manipularea clasei. Pe Partea specifică elementul ale cărui evenimente ar trebui să le asculte AniJS. Acest lucru poate fi diferit de elementul pe care l-ați configurat data-anijs atribut. Do parte specifică acțiunea care trebuie întreprinsă. Aici puteți specifica numele animației pe care doriți să o aplicați, etc. În final, faceți clic pe La parte este folosit pentru a specifica elementul care trebuie animat sau manipulat.
Dacă este necesară o parte pentru declarația AniJS pe care o adăugați pentru a anima orice element. Pe partea este opțională și, dacă este lăsată nespecificată, utilizează elementul curent ca valoare implicită. Do este necesar, de asemenea, deoarece îi spune browserului ce trebuie să facă atunci când se întâmplă evenimentul specificat. La parte este, de asemenea, opțională și implicit la elementul curent când nu este specificat.
De asemenea, puteți utiliza funcția Inainte de și După cârlige pentru a specifica ce ar trebui să se întâmple înainte și după ce AniJS face lucrul menționat în interiorul Do parte.
AniJS vă permite să rulați o animație prin declanșarea acesteia pe orice eveniment aplicabil afișat pe pagina MDN. În mod similar, puteți utiliza pe și la pentru a direcționa orice element doriți utilizând selectorii CSS. De exemplu, puteți specifica că doriți să ascultați un eveniment div.promotion sau secțiune div p.first, etc do o parte poate fi utilizată pentru a specifica animația pe care doriți să o aplicați diferitelor elemente. AniJS are o mulțime de animații care pot fi aplicate oricăror elemente pe care le doriți.
Următorul fragment HTML vă va arăta cum să aplicați unele animații asupra elementelor care vor fi declanșate în anumite evenimente.
În fiecare caz, tot ce trebuie să faceți este să scrieți declarațiile din interior data-anijs , iar biblioteca va avea grijă de restul. (S-au sarit la parte a tuturor acestor animații, astfel încât animația să fie aplicată elementului în interiorul căruia i-am specificat data-anijs atribut.)
Ultimile patru cutii au valori diferite pentru pe parte. Aceasta, de exemplu, înseamnă că animația de pe caseta verde se va întâmpla numai atunci când mouse-ul se mișcă peste cutia brună. În mod similar, animația de salt pe caseta galbenă va începe să fie redată ori de câte ori un utilizator face dublu clic pe oriunde în interiorul corpului.
Puteți încerca aceste animații în demonstrația CodePen încorporată.
AniJS vă permite să faceți mai mult decât pur și simplu animați diferite elemente. De exemplu, îl puteți utiliza pentru a adăuga, elimina sau comuta clase aplicate diferitelor elemente. În mod similar, puteți să eliminați elemente HTML sau să le clonați fără a adăuga o singură linie de JavaScript. De asemenea, biblioteca vă permite să traversați DOM utilizând cuvinte cheie rezervate speciale.
Să începem cu manipularea de clasă. AniJS are trei cuvinte cheie rezervate pentru manipularea clasei. Acestea sunt $ addClass, $ removeClass, și $ toggleClass. După cum sugerează și numele, le puteți folosi pentru a adăuga, elimina și comuta una sau mai multe clase ale unui element respectiv. Tot ce trebuie să faceți este să specificați numele clasei după cuvintele cheie rezervate.
În mod similar, puteți utiliza cuvinte cheie rezervate cum ar fi $ părinte, $ strămoși, $ cel mai apropiat, $ găsi, și $ copii pentru a traversa DOM.
Puteți utiliza împreună aceste două seturi de cuvinte cheie rezervate pentru a face ceva de genul adăugării unei anumite clase tuturor copiilor unui element după ce un vizitator face dublu clic pe acel element.
Cu toate acestea, la care copii se referă poate fi ambiguu în anumite cazuri. De exemplu, este posibil să fi aplicat data-anijs atribuiți unui element, dar stabiliți valoarea acestuia Pe parte la altceva folosind selectori CSS. În această situație, AniJS nu va avea niciun mod de a ști dacă clasa trebuie adăugată copiilor elementului menționat de selectorul CSS sau elementul la care ați aplicat data-anijs atribut.
În astfel de cazuri, puteți elimina ambiguitatea utilizând un alt cuvânt cheie rezervat numitţintă. Aici, ţintă se referă la elementul indicat de selectorul CSS.
Luați în considerare următoarele trei exemple în care AniJS a fost folosit pentru a comuta clase de elemente diferite:
În exemplul de mai sus, am reformatat codul HTML pentru a citi mai ușor și pentru a vedea ce se întâmplă.
Să începem cu prima div. În acest caz, am omis ambele pe și la părți din data-anijs valoarea atributului. Prin urmare, ambele au implicit curentul div în sine. Dacă încercați să faceți clic pe acest particular div, acesta va comuta portocale clasa, care, la rândul său, schimbă caseta în portocaliu.
În cazul celui de-al doilea div, ii spunem lui AniJS sa schimbe clasa numita roșu pentru toate elementele care sunt copiii acelui particular div. Aceasta va roti toți copiii deschidere elemente și schimba culoarea lor în roșu, în timp ce setați raza de margine la zero.
Am furnizat două afirmații diferite în interiorul data-anijs atributul celui de-al treilea div. Ambele declarații comută la fel galben clasă. Cu toate acestea, efectele sunt complet diferite datorită utilizării ţintă cuvinte cheie.
În primul caz, am adăugat ţintă cuvânt cheie după $ părinte cuvinte cheie. Acest lucru spune AniJS că vrem să schimbăm clasa pentru părintele elementelor indicate de către scoici clasă. În al doilea caz, am omis ţintă , astfel încât AniJS modifică fundalul părintelui curent div. Din moment ce părintele div este corp ea însăși, întreaga pagină devine galbenă.
Puteți încerca să faceți clic pe elemente diferite și să vedeți cum afectează pagina în demo-ul CodePen încorporat.
Un lucru mai merită remarcat este că, deși data-anijs atributul pentru a treia casetă are două instrucțiuni, făcând clic pe caseta însăși nu are niciun efect. Acest lucru se datorează faptului că l-am instruit pe AniJS să asculte evenimentele de tip clic pe deschidere elemente cu clasă scoici în ambele cazuri.
O altă modalitate de a manipula elementele HTML pe o pagină web folosind AniJS ar fi clonarea sau eliminarea acestora. Biblioteca a rezervat cuvintele cheie $ remove și $ clona care va spune dacă doriți să eliminați un element sau să îl clonați.
Puteți să treceți mai mulți selectori la $ remove pentru a elimina mai multe elemente din pagina web. Rețineți că diferiți selectori CSS trebuie separați cu țeavă | caracter.
$ clona cuvântul cheie acceptă și doi parametri. Primul este selectorul CSS pentru a specifica elementul pe care doriți să-l clonați. Al doilea este un număr pentru a specifica câte copii doriți să faceți. De exemplu, $ clone .shells | 10 va face 10 copii ale elementelor cu clasa scoici și să le anexeze ca și copii ai elementului pe care data-anijs atributul a fost specificat. Dacă copiile trebuie să fie atașate unui element diferit, puteți să-l îndreptați către AniJS specificând selectorul CSS după la în declarația AniJS.
Scopul acestui tutorial a fost de a vă ajuta să începeți cu AniJS cât mai curând posibil. Așa cum ați fi observat, biblioteca este foarte ușor de folosit. Tot ce trebuie să faceți este să specificați valorile atributelor corecte și AniJS va avea grijă de orice altceva, cum ar fi schimbarea clasei, manipularea DOM și animarea oricăror modificări.
Biblioteca oferă multe alte caracteristici pe care nu le-am acoperit în acest tutorial. Trebuie să treceți prin documentația oficială pentru a afla mai multe despre aceasta și pentru a le folosi la întregul lor potențial.
Accentsconagua