Este Javascript de 500 bytes pode prever os movimentos do cursor do usuário
Você pode fazer algumas coisas muito legais com JavaScript e código-fonte aberto torna o trabalho ainda mais fácil.
Premonish é uma das bibliotecas mais legais que já vi e é construído com apenas 500 bytes de JavaScript. Com este plugin, você pode detectar onde o mouse do usuário está se movendo e prever em qual elemento eles estão indo.
Isso pode soar como uma ideia complexa, mas é bastante fácil de implementar. Sem mencionar isso, oferece uma tonelada de oportunidade para os desenvolvedores criarem alguns efeitos muito legais, como animações pré-focalizadas ou efeitos dinâmicos de layout.
Você começa por segmentando um elemento na página e definindo como vai ficar quando o usuário está se movendo para esse elemento.
Todos os cálculos são feitos no backend com a biblioteca Premonish, então você não precisa se preocupar com a matemática ou a lógica por trás disso..
Em vez disso, você está procurando uma maneira de lidar com a previsão com base em uma classificação de confiança do comportamento do usuário. Isso tudo é passado para JavaScript, então você pode escrever suas próprias funções para lidar com os comportamentos do usuário.
Aqui está um exemplo de fragmento da demo do Premonish:
premonish.onIntent ((el, confidence) => // el é o elemento DOM esperado // confiança é uma pontuação de 0-1 em quão confiantes estamos nesta previsão.);
o onIntent () método é cozido em Premonish e é chamado sempre que os avisos da biblioteca um usuário se movendo em direção a algum elemento.
Você também pode usar outro método, onMouseMove (), que corre toda vez que o cursor muda posições X / Y na tela. Desta forma, você pode ver como o Premonish está calculando as chances de intenção do usuário.
Você pode encontrar um monte de informações no repositório principal do GitHub que inclui trechos de código simples para você começar. Inicialização apenas requer uma série de seletores ou elementos DOM que deve ser alvo.
Como você realmente usa este plugin é totalmente com você. Isto não pretende ser uma solução completa, mas sim um ponto de partida para ajudá-lo assumir intenções do usuário e construir uma experiência em torno desse.
Confira a demonstração ao vivo para ver como tudo isso funciona e ver um “modo de depuração” onde você pode ver como o algoritmo de previsão funciona em tempo real.
Você também pode compartilhar seus pensamentos e agradecer ao criador Matthew Conlen em seu Twitter @mathisonian.
