Denne 500 bytes Javascript kan forudse brugerens markørbevægelser

Du kan gøre nogle virkelig seje ting med JavaScript og open source-kode gør arbejdet endnu nemmere.

Premonish er et af de sejeste biblioteker jeg har set, og det er bygget med kun 500 bytes JavaScript. Med dette plugin kan du registrere, hvor brugerens mus bevæger sig og forudsige hvilket element de er på vej mod.

Det kan lyde som en kompleks ide, men det er ret nemt at implementere. For ikke at nævne dette tilbyder a ton af muligheder for udviklere at skabe nogle virkelig seje effekter som pre-hover animationer eller dynamiske layout effekter.

Du starter med målretning mod et element på siden og definerer hvordan det vil se ud når brugeren bevæger sig mod det pågældende element.

Alle beregningerne er lavet på backend med Premonish-biblioteket, så du behøver ikke bekymre dig om matematikken eller logikken bag dette.

I stedet søger du efter en vej til håndter forudsigelsen baseret på en fortrolighedsrangering af brugerens adfærd. Dette er alle overført til JavaScript, så du kan skrive dine egne funktioner til håndtere brugeradfærd.

Her er en Eksempeluddrag fra Premonish demo:

 premonish.onIntent ((el, confidence) => // el er det forventede DOM element // tillid er en score fra 0-1 på, hvor trygge vi er i denne forudsigelse.); 

Det onIntent () Metoden er bagt ind i Premonish, og det hedder, når biblioteket oplyser en bruger bevæger sig mod noget element.

Du kan også bruge en anden metode, onMouseMove (), som løber hver gang Markøren ændrer X / Y positioner på skærmen. På denne måde kan du se, hvordan Premonish beregner oddsene for brugerens hensigt.

Du kan finde en masse oplysninger i de vigtigste GitHub repo som indeholder enkle kodestykker for at komme i gang. Initialisering kræver bare en række selektorer eller DOM elementer det burde være målrettet.

Hvordan du faktisk bruger dette plugin er helt op til dig. Dette er ikke meningen at være en komplet løsning, men et udgangspunkt for at hjælpe dig antage brugerens hensigter og opbygge en oplevelse omkring det.

Tjek den live demo for at se, hvordan alt dette virker og at se en “fejlretningstilstand” hvor du kan se, hvordan forudsigelsesalgoritmen fungerer i realtid.

Du kan også dele dine tanker og sige tak til skaberen Matthew Conlen på hans Twitter @mathisonian.