Cum de a adăuga rapid microinterații pe site-ul dvs.

În sfatul rapid de astăzi vă voi arăta cum să adăugați microinterații pe site-ul dvs. utilizând o bibliotecă JavaScript numită micron.js. Cu ajutorul programului micron.js puteți adăuga animații subtile elementelor paginii dvs. web fără a fi nevoie să scrieți stilurile dvs. - totul se face folosind atributele de date în marcajul dvs. Hai să aruncăm o privire!

Urmăriți ecranul Micron.js

1. Obțineți micron.js

Vizitați pagina de pornire a micron.js și veți găsi, împreună cu unele demo-uri, un link către repo. Pentru a începe, veți avea nevoie de fișierul CSS și fișierul JavaScript, link-urile CDN pentru care arată astfel:

Fie adăugați-le în pagina dvs. pe măsură ce le vedeți, fie dacă utilizați un stilou CodePen, adăugați linkurile la filele CSS și JavaScript în setările stiloului.

2. Adăugați o microinterație

Să folosim un exemplu de ancora. Luați următoarele:

Mod implicit

Dacă faceți clic pe o ancoră ca aceasta, nu se va face absolut nimic. Cu toate acestea, prin adăugarea unui atribut de date cu numele de date microni, putem adăuga o fărâmă la ancora noastră.

Mod implicit

Aici veți vedea că am adăugat valoarea scutura la atributul nostru. Aceasta ar fi putut fi una dintre numeroasele valori, toate oferindu-ne o interacțiune diferită:

• scutura
• decolorare
• jeleu
• sări
• Tada
• canelură
• leagăn
• stoarce
• pâlpâire
• smucitură
• clipi din ochi
• pop

Acum când faceți clic pe ancora, veți vedea un feedback vizual sub forma microinterației noastre.

3. Reglați durata animației

Adăugarea unui alt atribut de date ne va permite să modificăm durata animației:

date de microni durată = „1“

Valoarea dată este în secunde, astfel că atributul de mai sus va încetini animația implicită pentru a dura o secundă.

4. Reglați funcția Easing

Ai înțeles acum, nu? Să adăugăm un alt atribut pentru a regla funcția de relaxare a animației.

date microni temporizare = „linear“

Din nou, sunt sprijinite aici câteva valori familiare:

• liniar
• ușurința în
• ușura-out
• ușurința în-out

5. Legați de un alt element

Putem folosi micron.js pentru a direcționa elemente diferite de cele pe care se face clic, de data aceasta cu două atribute de date:

data-micron-bind = "adevărat" date-micron-id = "țintă"

În acest caz, spunem că este obligatorie Adevărat, și că vrem ca animația să aibă efect asupra unui element cu id-ul ţintă. 

Consultați demo-ul de mai jos pentru o colecție de toate aceste exemple, inclusiv legarea (faceți clic pe legat buton și vedeți animația roșie div):

Concluzie

Micron.js face chiar mai mult pentru microinterații decât am demonstrat în acest tutorial, vizitați site-ul, jucați și vedeți-vă singur!

Aflați mai multe