Questo Javascript di 500 byte può predire i movimenti del cursore dell'utente
Puoi fare cose davvero interessanti con JavaScript e il codice open source rende il lavoro ancora più facile.
Premonish è una delle librerie più belle che abbia mai visto e con cui è stata costruita solo 500 byte di JavaScript. Con questo plug-in, è possibile rilevare dove si muove il mouse dell'utente e prevedere quale elemento puntano verso.
Può sembrare un'idea complessa ma è abbastanza facile da implementare. Per non parlare di ciò offre a tonnellata di opportunità per gli sviluppatori di creare effetti davvero interessanti come animazioni pre-hover o effetti di layout dinamici.
Inizi a partire targeting di un elemento sulla pagina e definendo come apparirà quando l'utente si sta muovendo verso quell'elemento.
Tutti i calcoli sono fatti sul backend con la libreria Premonish, quindi non devi preoccuparti della matematica o della logica alla base di questo.
Invece, stai cercando un modo per gestire la previsione basato su una classifica di fiducia del comportamento dell'utente. Tutto questo è passato in JavaScript, quindi puoi scrivere le tue funzioni in gestire i comportamenti degli utenti.
Ecco un esempio di snippet dalla demo di Premonish:
premonish.onIntent ((el, confidence) => // el è l'elemento DOM atteso // la confidenza è un punteggio da 0-1 su quanto siamo fiduciosi in questa previsione.);
Il onIntent () il metodo viene cotto in Premonish e viene chiamato ogni volta che la libreria rileva un utente che si muove verso un elemento.
Puoi anche usare un altro metodo, onMouseMove (), che corre ogni volta che il il cursore cambia posizione X / Y sullo schermo. In questo modo puoi vedere come Premonish sta calcolando le probabilità di intento dell'utente.
Puoi trovare un sacco di informazioni nel repository principale di GitHub che include snippet di codice semplici per iniziare. L'inizializzazione richiede solo una serie di selettori o elementi DOM che dovrebbe essere mirato.
Il modo in cui utilizzi questo plug-in dipende totalmente da te. Questo non è pensato per essere una soluzione completa, ma piuttosto un punto di partenza per aiutarti assumere le intenzioni dell'utente e costruisci un'esperienza intorno a questo.
Guarda il dimostrazione dal vivo per vedere come funziona tutto e vedere a “modalità di debug” dove puoi vedere come funziona l'algoritmo di predizione in tempo reale.
Puoi anche condividere i tuoi pensieri e dire grazie al creatore Matthew Conlen sul suo Twitter @mathisonian.
