Ez az 500 bájtos Javascript megjósolhatja a felhasználó kurzormozgásait

Megteheti, hogy néhány nagyon jó dolog a JavaScript segítségével, a nyílt forráskód pedig még könnyebbé teszi a munkát.

Premonish az egyik legmenőbb könyvtár, amit láttam és építettem csak 500 bájt JavaScript. Ezzel a pluginnel észlelheti, hol mozog a felhasználó egér, és megjósolja, hogy melyik elem felé haladnak.

Ez komplex ötletnek tűnik, de meglehetősen könnyen megvalósítható. Nem is beszélve ez az ajánlat a tonna lehetősége van a fejlesztőknek, hogy hozzon létre néhány nagyon hűvös hatást, mint például előtti animációk vagy dinamikus elrendezési hatások.

Kezdjük egy elem célzása az oldalon és meghatározza, hogyan fog kinézni amikor a felhasználó az elem felé halad.

A számításokat a Premonish könyvtár segítségével végzik el, így nem kell aggódnia a mögöttes matematika vagy logika miatt..

Ehelyett egy utat keresel kezelje az előrejelzést a felhasználó viselkedésének bizalmi rangsorolásán alapul. Mindez átkerül a JavaScript-be, így saját funkcióit is beírhatja kezelje a felhasználói viselkedést.

Itt van egy példa részlet a Premonish demóból:

 premonish.onIntent ((el, confidence) => // el a várt DOM elem // a bizalom 0-1-es pontszám, hogy mennyire vagyunk benne ebben az előrejelzésben.); 

A onIntent () A metódus a Premonish-ba sült, és minden alkalommal, amikor a könyvtár észrevételeit hívják egy felhasználó bizonyos elem felé halad.

Használhat egy másik módszert is, onMouseMove (), ami minden alkalommal fut a kurzor megváltoztatja az X / Y pozíciókat a képernyőn. Így láthatja, hogy a Premonish kiszámolja a felhasználói szándék esélyeit.

A GitHub fő repójában megtalálható egy csomó információ egyszerű kódrészleteket tartalmaz elkezdeni. Az inicializálás csak megköveteli egy sor szelektor vagy DOM elem célzottnak kell lennie.

Hogy valóban használja ezt a bővítményt, teljesen rajtad múlik. Ez nem teljes megoldás, hanem kiindulópont, hogy segítsen vállalja a felhasználói szándékokat és építsen körül egy ilyen élményt.

Nézd meg a élő demó hogy lássuk, hogy ez hogyan működik, és látja a “hibakeresési mód” ahol megtekintheti, hogyan működik a predikciós algoritmus valós időben.

Megoszthatja gondolatait is, és köszönetét mondhatja Matthew Conlennek, a Twitter @mathisonian-nak.