See 500 baiti Javascript võib ennustada kasutaja kursori liigutusi

Te saate teha mõningaid väga lahedaid asju JavaScripti ja avatud lähtekoodiga muudab töö veelgi lihtsamaks.

Ülevene on üks lahedamaid raamatukogusid, mida ma olen näinud ja ehitatud ainult 500 baiti JavaScript. Selle pluginaga saate tuvastada, kus kasutaja hiir liigub, ja ennustada, millist elementi nad liiguvad.

See võib tunduda keeruka ideena, kuid seda on üsna lihtne rakendada. Rääkimata sellest pakkumistest a tonn võimalus arendajatele luua mõningaid tõeliselt lahedaid mõjusid, näiteks hover-eelne animatsioon või dünaamilised paigutusefektid.

Te alustate elemendi sihtimine lehel ja kuidas see välja näeb kui kasutaja liigub selle elemendi poole.

Kõik arvutused tehakse backendiga Premonishi raamatukogu abil, nii et sa ei pea muretsema selle matemaatika või loogika pärast.

Selle asemel otsite teed tegelege prognoosiga kasutaja käitumise usalduse järjekorras. See kõik edastatakse JavaScripti, nii et saate oma funktsioonid kirjutada käsitseda kasutaja käitumist.

Siin on näite fragment Premonish demost:

 premonish.onIntent ((el, confidence) => // el on oodatav DOM element // usaldus on skoor 0-1, kui kindel on selles ennustuses.); 

The onIntent () meetod on küpsetatud Premonishisse ja seda kutsutakse alati, kui raamatukogu teated kasutaja liigub mõne elemendi suunas.

Võite kasutada ka teist meetodit, onMouseMove (), mis kestab iga kord kursor muudab X / Y positsioone ekraanil. Nii näete, kuidas Premonish arvutab kasutaja kavatsuse tõenäosust.

GitHubi peamises repos on võimalik leida hulga teavet sisaldab lihtsaid koodilõikeid alustada. Alustus on lihtsalt vajalik valikuid või DOM elemente see peaks olema suunatud.

Kuidas sa seda pluginat tegelikult kasutad, on sinu enda otsustada. See ei ole mõeldud täielikuks lahenduseks, vaid pigem lähtepunktiks endale kasutaja kavatsused ja ehitada selle ümber kogemus.

Kontrollige live demo et näha, kuidas see kõik toimib ja vaata a “debug-režiimis” kus saab vaadata, kuidas ennustusalgoritm reaalajas töötab.

Samuti saate jagada oma mõtteid ja öelda tänu loojale Matthew Conlenile oma Twitteris @mathisonian.