Denne 500 bytes Javascript kan forutsi brukerens markørbevegelser

Du kan gjøre noen veldig kule ting med JavaScript, og åpen kildekode gjør jobben enda enklere.

Premonish er en av de kuleste bibliotekene jeg har sett, og den er bygget med bare 500 bytes med JavaScript . Med dette pluginet kan du oppdage hvor brukerens mus beveger seg og forutsi hvilket element de er på vei mot.

Dette kan høres ut som en komplisert ide, men det er ganske enkelt å implementere. For ikke å nevne dette, er det en rekke muligheter for utviklere å lage noen virkelig kule effekter, for eksempel pre-hover animasjoner eller dynamiske layout effekter .

Du starter med å målrette et element på siden og definere hvordan det vil se ut når brukeren beveger seg mot det elementet.

Alle beregningene er gjort på backend med Premonish-biblioteket, så du trenger ikke å bekymre deg for matematikken eller logikken bak dette.

I stedet leter du etter en måte å håndtere prediksjonen basert på en konfidensrangering av brukerens oppførsel. Dette er alt passert inn i JavaScript, slik at du kan skrive dine egne funksjoner for å håndtere brukernes atferd .

Her er et eksempelutdrag fra Premonish-demoen:

 premonish.onIntent (({el, confidence}) => {// el er det forventede DOM elementet // tillit er en poengsum fra 0-1 på hvor trygg vi er i denne prediksjonen.}); 

onIntent() blir bakt inn i Premonish, og det kalles når biblioteket merker en bruker som beveger seg mot noe element .

Du kan også bruke en annen metode, onMouseMove(), som kjører hver gang markøren endrer X / Y-posisjoner på skjermen. På denne måten kan du se hvordan Premonish beregner oddsen for brukerens hensikt.

Du kan finne en haug med informasjon i hovedgitHub-repo, som inneholder enkle kodestykker for å komme i gang. Initialisering krever bare en rekke selektorer eller DOM-elementer som skal målrettes.

Hvordan du faktisk bruker dette pluginet er helt opp til deg. Dette er ikke ment å være en komplett løsning, men et utgangspunkt for å hjelpe deg med å anta brukerens intensjoner og bygge opp en opplevelse rundt det.

Ta en titt på live-demoen for å se hvordan alt dette fungerer og å se en "feilsøkingsmodus" der du kan se hvordan prediksjonsalgoritmen fungerer i sanntid.

Du kan også dele dine tanker og si takk til skaperen Matthew Conlen på hans Twitter @mathisonian.