hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

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

Premonish est l'une des bibliothèques les plus cool que j'ai vues et elle est construite avec seulement 500 octets de JavaScript . Avec ce plugin, vous pouvez détecter où la souris de l'utilisateur se déplace 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 compter que cela offre une tonne d'opportunité pour les développeurs de créer des effets vraiment cool tels que des animations pré-hover ou des effets de mise en page dynamiques .

Vous commencez par cibler un élément sur la page et définissez son apparence 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 besoin de vous soucier des maths ou de la logique derrière cela.

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

Voici un exemple d'extrait de la démo de Premonish:

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

La méthode onIntent() est précuite dans Premonish et elle est appelée chaque fois que la bibliothèque remarque qu'un utilisateur se déplace vers un élément .

Vous pouvez également utiliser une autre méthode, onMouseMove(), qui s'exécute chaque fois que le curseur modifie les positions X / Y sur l'écran. De cette façon, vous pouvez voir comment Premonish calcule les probabilités 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 simplement une série de sélecteurs ou d'éléments DOM qui doivent être ciblés.

Comment vous utilisez réellement ce plugin est totalement à vous. Ce n'est pas une solution complète, mais plutôt un point de départ pour vous aider à prendre en compte les intentions des utilisateurs et à construire une expérience autour de cela.

Découvrez la démo en direct pour voir comment tout cela fonctionne et pour voir un "mode de débogage" où vous pouvez regarder comment l'algorithme de prédiction fonctionne en temps réel.

Vous pouvez également partager vos pensées et dire merci au créateur Matthew Conlen sur Twitter @mathisonian.

Plus de 50 + polices de symboles de haute qualité et gratuit pour les concepteurs Web

Plus de 50 + polices de symboles de haute qualité et gratuit pour les concepteurs Web

Ces derniers temps, des polices de symboles à l'aspect impressionnant sont apparues sur tout le web, le nombre de polices conçues pour être utilisées sous forme d'icônes, de symboles et de glyphes augmentant de jour en jour. En fait, de nombreux sites Web ont déjà remplacé leurs images par une seule police de caractères - GitHub en est un exemple.En utili

(Conseils techniques et de conception)

Conception intelligente: 15 gadgets pliables et concepts que vous devriez voir

Conception intelligente: 15 gadgets pliables et concepts que vous devriez voir

Tout le monde semble avoir un smartphone ou une tablette sur leurs mains ces jours-ci. Et pourquoi pas? Cela nous permet de rester connecté, vous pouvez prendre des photos avec, regarder des vidéos dessus. C'est comme le compagnon idéal, et il va bien dans nos poches. Ou du moins, c'était habituel.Les

(Conseils techniques et de conception)