Úvodná » UI / UX » Tento 500 bajtov Javascript môže predvídať pohyby kurzora používateľa

    Tento 500 bajtov Javascript môže predvídať pohyby kurzora používateľa

    Môžete robiť nejaké naozaj cool veci s JavaScript a open source kód uľahčuje prácu.

    Premonish je jednou z najkvalitnejších knižníc, ktoré som videl a je postavený iba 500 bajtov jazyka JavaScript. Pomocou tohto pluginu môžete zistiť, kam sa myš myši pohybuje, a predpovedať, do ktorého elementu smerujú.

    Môže to znieť ako zložitá myšlienka, ale je to dosť jednoduché. Nehovoriac o tom ponúka tona príležitosť pre vývojárov vytvoriť niektoré naozaj cool účinky, ako je pre-hover animácie alebo dynamické rozloženie efekty.

    Začnete tým zacielenie na prvok na stránke a definovanie toho, ako to bude vyzerať keď sa používateľ pohybuje smerom k tomuto prvku.

    Všetky výpočty sa vykonávajú na backende s knižnicou Premonish, takže sa nemusíte obávať matematiky alebo logiky za tým.

    Namiesto toho hľadáte cestu zvládnuť predpoveď založené na hodnotení spoľahlivosti správania používateľa. To všetko prechádza do jazyka JavaScript, takže si môžete napísať svoje vlastné funkcie zvládnuť správanie používateľa.

    Tu je jeden príklad úryvku z Premonish demo:

     premonish.onIntent ((el, confidence) => // el je očakávaný prvok DOM // dôvera je skóre od 0-1 o tom, ako sme presvedčení o tejto predikcii.); 

    onIntent () metóda je pečená do Premonish a nazýva sa to vždy, keď si knižnica všimne používateľ, ktorý sa pohybuje smerom k nejakému prvku.

    Môžete tiež použiť inú metódu, onMouseMove (), ktorý beží zakaždým kurzor mení pozície X / Y na obrazovke. Týmto spôsobom môžete vidieť, ako Premonish vypočítava šance na úmysel používateľa.

    V hlavnom repo GitHub nájdete veľa informácií obsahuje jednoduché útržky kódu aby ste začali. Inicializácia to len vyžaduje rad voličov alebo prvkov DOM ktoré by mali byť cielené.

    Ako skutočne používate tento plugin je úplne na vás. Nie je to úplné riešenie, ale skôr východiskový bod, ktorý vám pomôže prevziať používateľské zámery a budovať skúsenosti okolo toho.

    Pozrite sa na stránku živé demo vidieť, ako to všetko funguje a vidieť a “ladenie” kde môžete sledovať, ako predpovedný algoritmus funguje v reálnom čase.

    Môžete tiež zdieľať svoje myšlienky a vyjadriť vďaka tvorcovi Matthewovi Conlenovi na jeho Twitter @ mathisonian.