Slik legger du raskt til mikrointeraksjoner på nettstedet ditt

I dagens raske tips skal jeg vise deg hvordan du legger til mikrointeraksjoner på nettstedet ditt ved hjelp av et JavaScript-bibliotek kalt micron.js. Med micron.js kan du legge til subtile animasjoner til elementene dine på websiden uten å skrive stilene selv - alt er gjort ved hjelp av dataattributter i oppslaget ditt. La oss ta en titt!

Se på Micron.js Screencast

1. Få micron.js

Gå til micron.js hjemmeside, og du vil sammen med noen demoer finne en link til repoen. For å komme i gang trenger du CSS-filen og JavaScript-filen, CDN-koblingene som ser slik ut:

Legg enten disse til siden din som du ser dem, eller hvis du bruker en CodePen-penn, legg til koblingene til CSS og JavaScript-fanene i penninnstillingene.

2. Legg til en mikrointeraksjon

La oss bruke et ankerelement som et eksempel. Ta følgende:

Misligholde

Å klikke på et anker som dette vil gjøre absolutt ingenting. Men ved å legge til et datatributt med navnet på data-mikron, vi kan legge til litt flair til vårt anker.

Misligholde

Her ser vi at vi har lagt til verdien riste til vår attributt. Dette kunne ha vært en av en rekke verdier, som alle gir oss et annet samspill:

• riste
• falme
• gelé
• sprette
• Tada
• spor
• svinge
• klemme
• flimmer
• dust
• blinke
• pop

Nå når du klikker ankeret, vil du se litt visuell tilbakemelding i form av vår mikrointeraksjon.

3. Juster animasjonsvarighet

Hvis du legger til et annet datatributt, kan vi endre animasjonens varighet:

data-micron-varighet = "1"

Verdien som er oppgitt, er i sekunder, så attributtet ovenfor vil redusere standard animasjonen til å vare et sekund.

4. Juster reduksjonsfunksjonen

Du får tak i dette nå, ikke sant? La oss legge til et annet attributt for å justere animeringsfunksjonen.

data-micron-timing = "lineær"

Igjen støttes en rekke kjente verdier her:

• lineær
• ease-in
• ease-out
• ease-in-out

5. Bind til et annet element

Vi kan bruke micron.js til å målrette andre elementer enn det som blir klikket, denne gangen med to dataattributter:

data-micron-bind = "true" data-micron-id = "mål"

I dette tilfellet sier vi at bindende er ekte, og at vi vil at animasjonen skal tre i kraft på et element med ID av mål. 

Ta en titt på demoen nedenfor for en samling av alle disse eksemplene, inkludert bindingen (klikk på bundet knappen og se den røde div animere):

Konklusjon

Micron.js gjør enda mer for mikrointeraksjoner enn vi har demonstrert i denne opplæringen, besøker nettstedet, spiller og ser for deg selv!

Lære mer