Deze 500 bytes Javascript kan de cursorbewegingen van de gebruiker voorspellen
Je kunt een aantal echt coole dingen doen met JavaScript en open source code maakt het werk nog eenvoudiger.
Premonish is een van de coolste bibliotheken die ik heb gezien en waarmee het is gebouwd slechts 500 bytes JavaScript. Met deze plug-in kunt u detecteren waar de muis van de gebruiker zich verplaatst en kunt u voorspellen naar welk element deze gaat.
Dit klinkt misschien als een ingewikkeld idee, maar het is vrij eenvoudig te implementeren. Om nog maar te zwijgen van dit aanbod a ton kansen voor ontwikkelaars om een aantal echt coole effecten te creëren, zoals pre-hover-animaties of dynamische lay-outeffecten.
Je begint met richten op een element op de pagina en bepalen hoe het eruit zal zien wanneer de gebruiker naar dat element toe beweegt.
Alle berekeningen worden gedaan op de backend met de Premonish-bibliotheek, dus u hoeft zich geen zorgen te maken over de wiskunde of logica achter deze.
In plaats daarvan ben je op zoek naar een manier om omgaan met de voorspelling gebaseerd op een vertrouwensclassificatie van het gedrag van de gebruiker. Dit wordt allemaal doorgegeven aan JavaScript, dus je kunt je eigen functies naar schrijven omgaan met het gedrag van de gebruiker.
Hier is een voorbeeldfragment van de Premonish-demo:
premonish.onIntent ((el, confidence) => // el is het verwachte DOM-element // confidence is een score van 0-1 op hoe zeker we zijn van deze voorspelling.);
De onIntent () methode is ingebakken in Premonish en het wordt genoemd wanneer de bibliotheek opmerkt een gebruiker die op weg is naar een element.
U kunt ook een andere methode gebruiken, onMouseMove (), die elke keer wordt uitgevoerd cursor verandert X / Y-posities op het scherm. Op deze manier kunt u zien hoe Premonish de kans op gebruikersintentie berekent.
Je vindt een hoop informatie in de hoofdrepos van GitHub die bevat eenvoudige codefragmenten om u op weg te helpen. Initialisatie vereist alleen een reeks selectors of DOM-elementen dat moet doelgericht zijn.
Hoe u deze plug-in daadwerkelijk gebruikt, is geheel aan u. Dit is niet bedoeld als een complete oplossing, maar eerder als een startpunt om u te helpen veronderstel gebruikersintenties en bouw daar een ervaring omheen.
Bekijk de live demonstratie om te zien hoe dit allemaal werkt en om een te zien “foutopsporingsmodus” waar u kunt kijken hoe het voorspellingsalgoritme in realtime werkt.
Je kunt ook je gedachten delen en bedanken de maker Matthew Conlen op zijn Twitter @mathisonian.
