Página principal » UI / UX » Este Javascript de 500 bytes puede predecir los movimientos del cursor del usuario

    Este Javascript de 500 bytes puede predecir los movimientos del cursor del usuario

    Puedes hacer algunas cosas realmente geniales con JavaScript y el código de fuente abierta hace que el trabajo sea aún más fácil.

    Avisar Es una de las bibliotecas más geniales que he visto y está construida con solo 500 bytes de JavaScript. Con este complemento, puedes detectar a dónde se mueve el mouse del usuario y predecir a qué elemento se dirigen.

    Esto puede parecer una idea compleja pero es bastante fácil de implementar. Sin mencionar esto ofrece una tonelada de oportunidades para que los desarrolladores creen algunos efectos realmente geniales como animaciones pre-hover o efectos de diseño dinámicos.

    Empiezas por apuntando a un elemento en la página y definiendo cómo se verá cuando el usuario se está moviendo hacia ese elemento.

    Todos los cálculos se realizan en el backend con la biblioteca Premonish, por lo que no necesita preocuparse por las matemáticas o la lógica detrás de esto.

    En cambio, estás buscando una manera de manejar la predicción Basado en un ranking de confianza del comportamiento del usuario. Todo esto se pasa a JavaScript, por lo que puede escribir sus propias funciones en manejar los comportamientos del usuario.

    Aquí hay un fragmento de ejemplo de la demo Premonish:

     premonish.onIntent ((el, confidence) => // el es el elemento DOM esperado // la confianza es un puntaje de 0 a 1 sobre la confianza que tenemos en esta predicción.); 

    los onIntent () El método se incluye en Premonish y se llama cuando la biblioteca lo notifica. un usuario moviéndose hacia algún elemento.

    También puedes utilizar otro método., onMouseMove (), que corre cada vez que el el cursor cambia las posiciones X / Y en la pantalla. De esta manera puede ver cómo Premonish está calculando las probabilidades de intención del usuario.

    Puede encontrar un montón de información en el repositorio principal de GitHub que incluye fragmentos de código simples para empezar La inicialización solo requiere Una serie de selectores o elementos DOM. que debe ser dirigido.

    Cómo realmente usa este plugin depende totalmente de usted. Esto no pretende ser una solución completa, sino un punto de partida para ayudarlo. asumir las intenciones del usuario y construir una experiencia en torno a eso.

    Revisar la demo en vivo para ver cómo funciona todo esto y para ver una “modo de depuración” Donde puedes ver cómo funciona el algoritmo de predicción en tiempo real.

    También puedes compartir tus pensamientos y agradecer al creador Matthew Conlen en su cuenta de Twitter @mathisonian..