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 tilbyr a tonn av muligheter for utviklere å lage noen virkelig kule effekter som pre-hover animasjoner eller dynamiske layout effekter.

Du starter med målretter mot et element på siden og definerer hvordan det ser 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åndter prediksjonen basert på en konfidensrangering av brukerens oppførsel. Dette er alt passert til JavaScript, slik at du kan skrive dine egne funksjoner til håndter brukerens oppførsel.

Her er en eksempelbit fra Premonish-demoen:

 premonish.onIntent ((el, confidence) => // el er det forventede DOM elementet // konfidens er en score fra 0-1 på hvor trygg vi er i denne prognosen.); 

De onIntent () Metoden er bakt inn i Premonish, og det kalles når biblioteket melder En bruker beveger seg mot noe element.

Du kan også bruke en annen metode, onMouseMove (), som går 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 de viktigste GitHub repoene som inneholder enkle kodestykker å komme i gang. Initialisering krever bare en serie av selektorer eller DOM-elementer det bør være målrettet.

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 anta brukerens intensjoner og bygge en opplevelse rundt det.

Sjekk ut live demo for å se hvordan alt dette fungerer og å se en “feilsøkingsmodus” hvor 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.