Tämä 500 tavun Javascript voi ennakoida käyttäjän kohdistimen liikkeitä
Voit tehdä joitakin todella hienoja asioita JavaScriptin avulla ja avoimen lähdekoodin ansiosta työ on entistä helpompaa.
Premonish on yksi hienoimmista kirjastoista, jotka olen nähnyt ja se on rakennettu vain 500 tavua JavaScript. Tämän laajennuksen avulla voit havaita, mihin käyttäjän hiiri liikkuu ja ennustaa, mihin elementtiin he suuntaavat.
Tämä saattaa kuulostaa monimutkaiselta ajatukselta, mutta se on melko helppo toteuttaa. Puhumattakaan tästä tarjouksista a tonni mahdollisuus kehittäjille luoda todella hienoja vaikutuksia, kuten ennen hover-animaatioita tai dynaamiset ulkoasun vaikutukset.
Aloitat kohdistaminen elementtiin sivulla ja miten se näyttää kun käyttäjä siirtyy kohti tätä elementtiä.
Kaikki laskelmat tehdään backendissä Premonish-kirjaston avulla, joten sinun ei tarvitse huolehtia tämän matematiikan tai logiikan takia.
Sen sijaan etsit keinoa käsittele ennustetta perustuu käyttäjän käyttäytymisen luotettavuuteen. Tämä kaikki siirtyy JavaScriptiin, joten voit kirjoittaa omia toimintojasi käsittele käyttäjän käyttäytymistä.
Tässä on esimerkinpätkä Premonish-demosta:
premonish.onIntent ((el, confidence) => // el on odotettu DOM-elementti // luottamus on piste 0-1: stä siitä, kuinka luottavainen olemme tässä ennustuksessa.);
onIntent () menetelmä leivotaan Premonishiin ja sitä kutsutaan aina, kun kirjastotiedotteet ovat käyttäjä liikkuu kohti jotakin elementtiä.
Voit myös käyttää toista menetelmää, onmousemove (), joka kulkee joka kerta kohdistin muuttaa X / Y-sijainteja näytöllä. Näin voit nähdä, miten Premonish laskee käyttäjän tarkoituksen kertoimet.
GitHubin tärkeimmässä repossa on joukko tietoja sisältää yksinkertaisia koodinpätkiä pääset alkuun. Alustus edellyttää vain sarja valikoimia tai DOM-elementtejä joka olisi kohdennettava.
Kuinka käytät tätä pluginia, on täysin sinun itsestänne. Tämä ei ole tarkoitus olla täydellinen ratkaisu, vaan lähtökohta, joka auttaa sinua ota käyttäjän aikomukset ja rakentaa sen ympärille kokemusta.
Tutustu live-esittely nähdä miten tämä kaikki toimii ja nähdä a “debug-tilassa” missä voit katsella, miten ennustusalgoritmi toimii reaaliajassa.
Voit myös jakaa ajatuksiasi ja sanoa kiitoksesi luojalle Matthew Conlenille Twitteristä @mathisonian.
