Ce Javascript de 500 octets peut prédire les mouvements du curseur de l'utilisateur

Vous pouvez faire des choses vraiment cool avec JavaScript et le code source ouvert rend le travail encore plus facile.

Prémonish est l'une des bibliothèques les plus cool que j'ai vu et il est construit avec seulement 500 octets de JavaScript. Avec ce plugin, vous pouvez détecter l’emplacement de la souris de l’utilisateur et prédire l’élément vers lequel il se dirige..

Cela peut sembler une idée complexe, mais il est assez facile à mettre en œuvre. Sans oublier que cela offre un tonne l'occasion pour les développeurs de créer des effets vraiment cool tels que animations pré-stationnaires ou effets de mise en page dynamiques.

Vous commencez par cibler un élément sur la page et définir à quoi ça va ressembler lorsque l'utilisateur se déplace vers cet élément.

Tous les calculs sont effectués sur le backend avec la bibliothèque Premonish, vous n'avez donc pas à vous soucier des calculs ou de la logique derrière tout cela..

Au lieu de cela, vous cherchez un moyen de gérer la prédiction basé sur un classement de confiance du comportement de l'utilisateur. Tout cela est passé en JavaScript, vous pouvez donc écrire vos propres fonctions dans gérer les comportements des utilisateurs.

Voici un exemple extrait de la démo Premonish:

 premonish.onIntent ((el, confiance) => // el est l'élément DOM attendu // la confiance est un score de 0 à 1 sur la confiance que nous avons dans cette prévision.); 

le onIntent () méthode est cuite dans Premonish et il est appelé chaque fois que la bibliothèque remarque un utilisateur se dirigeant vers un élément.

Vous pouvez également utiliser une autre méthode, onMouseMove (), qui court chaque fois que le le curseur change les positions X / Y sur l'écran. De cette façon, vous pouvez voir comment Premonish calcule les chances d'intention de l'utilisateur.

Vous pouvez trouver un tas d’informations dans le dépôt principal GitHub qui comprend des extraits de code simples pour vous aider à démarrer. L'initialisation nécessite juste une série de sélecteurs ou d'éléments DOM cela devrait être ciblé.

Comment vous utilisez réellement ce plugin est totalement à vous. Ce n'est pas censé être une solution complète, mais plutôt un point de départ pour vous aider assumer les intentions de l'utilisateur et construire une expérience autour de cela.

Vérifiez démo en direct pour voir comment tout cela fonctionne et pour voir un “Mode débogage” où vous pouvez regarder comment fonctionne l'algorithme de prédiction en temps réel.

Vous pouvez également partager vos pensées et remercier le créateur Matthew Conlen sur son compte Twitter @mathisonian.