Javascript di 500 byte prevede i movimenti del mouse
Puoi fare alcune cose davvero interessanti con JavaScript e il codice open source rende il lavoro ancora più semplice.
Premonish è una libreria interessante ed è costruita con solo 500 byte di JavaScript . Con questo plug-in, è possibile rilevare la posizione del mouse dell’utente e prevedere a quale elemento si stanno dirigendo.
Può sembrare un’idea complessa, ma è abbastanza facile da implementare. Per non parlare delle opportunità per gli sviluppatori di creare alcuni effetti davvero cool, come le animazioni pre-hover o effetti di layout dinamici.
Inizi con il targeting di un elemento sulla pagina e definendo come apparirà quando l’utente si sposta verso quell’elemento.
Tutti i calcoli vengono eseguiti sul back-end con la libreria Premonish, quindi non è necessario preoccuparsi della matematica o della logica dietro questo.
Invece, stai cercando un modo per gestire la previsione basata su un ranking di fiducia del comportamento dell’utente. Tutto questo viene passato in JavaScript, quindi puoi scrivere le tue funzioni per gestire i comportamenti degli utenti .
Ecco un frammento di esempio della demo di Premonish:
|
1
2
3
4
|
premonish.onIntent(({el, confidence}) => { // el is the expected DOM element // confidence is a score from 0-1 on how confident we are in this prediction.}); |
Il onIntent()metodo è inserito in Premonish e viene chiamato ogni volta che la libreria nota un utente che si sposta verso qualche elemento .
Puoi anche usare un altro metodo, onMouseMove()che viene eseguito ogni volta che il cursore cambia le posizioni X / Y sullo schermo. In questo modo puoi vedere come Premonish sta calcolando le probabilità dell’intenzione dell’utente.
Puoi trovare un sacco di informazioni nel repository GitHub principale che include semplici frammenti di codice per iniziare. L’inizializzazione richiede solo una serie di selettori o elementi DOM che devono essere scelti come target.
Il modo in cui usi effettivamente questo plugin dipende totalmente da te. Questo non è pensato per essere una soluzione completa, ma piuttosto un punto di partenza per aiutarti ad assumere le intenzioni dell’utente e costruire un’esperienza al riguardo.
Guarda la demo live per vedere come funziona tutto questo e per vedere una “modalità di debug” in cui puoi vedere come funziona l’algoritmo di previsione in tempo reale.
Guarda la demo live per vedere come funziona tutto questo e per vedere una “modalità di debug” in cui puoi vedere come funziona l’algoritmo di previsione in tempo reale.
