Denna 500 bytes Javascript kan förutse användarens markörrörelser

Du kan göra några riktigt coola saker med JavaScript och öppen källkod gör arbetet ännu enklare.

Premonish är ett av de coolaste biblioteken jag har sett och det är byggt med bara 500 byte av JavaScript. Med det här pluginet kan du upptäcka var användarens mus rör sig och förutse vilket element de är på väg mot.

Det kan låta som en komplex idé men det är ganska lätt att implementera. För att inte tala om detta erbjuder a ton av möjligheter för utvecklare att skapa några riktigt coola effekter som pre-hover animeringar eller dynamiska layouteffekter.

Du börjar med riktade mot ett element på sidan och definierar hur det ska se ut när användaren flyttar mot det här elementet.

Alla beräkningar görs på baksidan med Premonish-biblioteket, så du behöver inte oroa dig för matematiken eller logiken bakom detta.

Istället letar du efter ett sätt att hantera förutsägelsen baserat på en konfidensrankning av användarens beteende. Detta passerar alla in i JavaScript, så du kan skriva dina egna funktioner till hantera användarbeteenden.

Här är en exemplarbit från Premonish demo:

 premonish.onIntent ((el, confidence) => // el är det förväntade DOM-elementet // förtroende är ett poäng från 0-1 på hur säkert vi är i denna förutsägelse.); 

De onIntent () Metoden bakas i Premonish och det kallas när biblioteket märker en användare som flyttar mot något element.

Du kan också använda en annan metod, onMouseMove (), som löper varje gång Markören ändrar X / Y-positionerna på skärmen. På så sätt kan du se hur Premonish beräknar oddsen för användarens avsikt.

Du kan hitta en massa information i GitHub-repo som innehåller enkla kodutdrag för att komma igång. Initialisering kräver bara en serie av selektorer eller DOM-element det borde vara riktat.

Hur du faktiskt använder det här pluginet är helt upp till dig. Detta är inte tänkt att vara en komplett lösning, utan snarare en utgångspunkt för att hjälpa dig anta användarens avsikter och bygga upp en erfarenhet kring det.

Kolla in live-demo för att se hur allting fungerar och att se en “debugläge” där du kan se hur prediksionsalgoritmen fungerar i realtid.

Du kan också dela dina tankar och säga tack vare skaparen Matthew Conlen på hans Twitter @mathisonian.