この500バイトのJavascriptはユーザのカーソル移動を予測することができる

あなたはJavaScriptでいくつかの本当にクールなことをすることができますそしてオープンソースコードは仕事をさらに簡単にします.

予感 私が見た中で最もクールなライブラリの一つであり、それはで構築されています わずか500バイトのJavaScript. このプラグインを使用すると、ユーザーのマウスが移動している場所を検出し、ユーザーがどの要素に向かっているのかを予測できます。.

これは複雑なアイデアのように思えるかもしれませんが、実装はかなり簡単です。これは言うまでもありません トン 開発者にとって、次のような本当に素晴らしい効果を生み出す機会があります。 ホバー前のアニメーション または 動的レイアウト効果.

で始まる 要素をターゲティングする ページ上 外観を定義する ユーザーがその要素に向かって移動しているとき.

すべての計算はPremonishライブラリを使ってバックエンドで行われるので、この背後にある数学や論理について心配する必要はありません。.

代わりに、あなたは方法を探しています 予測を処理する ユーザーの行動の信頼順位に基づいています。これはすべてJavaScriptに渡されるので、あなたはあなた自身の関数を書くことができます。 ユーザーの行動を処理する.

これが スニペットの例 Premonishデモから

 premonish.onIntent（（el、confidence）=> // elは期待されるDOM要素です。//信頼度は、この予測にどれだけ自信があるかについての0〜1のスコアです。）; 

の onIntent（） methodはPremonishに焼き付けられ、ライブラリが気付くたびに呼び出されます ユーザーが何らかの要素に向かって移動している.

他の方法も使えます, onMouseMove（）, 毎回実行されます カーソルがX / Y位置を変える 画面上。このようにして、Premonishがユーザーの意図の可能性をどのように計算しているかがわかります。.

メインのGitHubリポジトリにたくさんの情報があります。 単純なコードスニペットが含まれています 始めましょう。初期化に必要なものだけ 一連のセレクターまたはDOM要素 それはターゲットにされるべきです.

このプラグインを実際にどのように使用するかはあなた次第です。これは完全な解決策ではなく、むしろあなたを助けるための出発点です。 ユーザーの意図を想定する そしてそれに関する経験を積む.

をチェック ライブデモ これがどのように機能するのかを見るために “デバッグモード” 予測アルゴリズムがリアルタイムでどのように機能するかを見ることができる場所.

あなたの考えを共有し、彼のTwitterの@mathisonianで作成者Matthew Conlenに感謝を言うこともできます.