Hur man snabbt lägger till mikrointeraktioner på din webbplats

I dagens snabba tips ska jag visa dig hur du lägger till mikrointeraktioner på din webbplats med ett JavaScript-bibliotek som heter micron.js. Med micron.js kan du lägga till subtila animeringar till dina webbsidor utan att behöva skriva stilar själv - allt är gjort med att använda dataegenskaper i din markering. Låt oss ta en titt!

Titta på Micron.js Screencast

1. Hämta micron.js

Besök micron.js hemsida och du hittar, tillsammans med några demoer, en länk till repo. För att komma igång behöver du CSS-filen och JavaScript-filen. CDN-länkarna för vilka ser ut så här:

Lägg till dessa på din sida när du ser dem, eller om du använder en CodePen-penna, lägg till länkarna till CSS- och JavaScript-flikarna i penninställningarna.

2. Lägg till en mikrointeraktion

Låt oss använda ett ankarelement som ett exempel. Ta följande:

Standard

Att klicka på ett förankring så här kommer att göra absolut ingenting. Men genom att lägga till ett datatribut med namnet på data mikron, Vi kan lägga till lite känsla för vårt ankar.

Standard

Här ser vi att vi har lagt till värdet skaka till vårt attribut Detta kunde ha varit ett av ett antal värden, allt ger oss en annan interaktion:

• skaka
• blekna
• gelé
• studsa
• tada
• räffla
• svänga
• pressa
• flimmer
• rycka
• blinka
• pop-

Nu när du klickar på ankaret ser du viss visuell återkoppling i form av vår mikrointeraktion.

3. Justera animeringstiden

Om du lägger till ett annat dataattribut tillåter vi att ändra animeringens varaktighet:

data mikron-varaktighet = "1"

Det angivna värdet är i sekunder, så att attributet ovan skulle sakta ner standardanimeringen till en sekund.

4. Justera Lättningsfunktion

Du hänger med det nu, eller hur? Låt oss lägga till ett annat attribut för att justera animeringens lättnadsfunktion.

data mikron-timing = "linjär"

Återigen stöds ett antal bekanta värden här:

• linjär
• lindra-in
• lindra-out
• enkel in-out

5. Bind till ett annat element

Vi kan använda micron.js för att rikta in andra element än vad som klickas, den här gången med två data attribut:

data-micron-bind = "sant" data-micron-id = "target"

I det här fallet säger vi att bindande är Sann, och att vi vill att animationen ska träda i kraft på ett element med iden av mål. 

Kolla in demo nedan för en samling av alla dessa exempel, inklusive bindningen (klicka på bunden knapp och se den röda div animera):

Slutsats

Micron.js gör ännu mer för mikrointeraktioner än vi har visat i den här handledningen, besöker webbplatsen, spelar och ser själv!

Läs mer