Anasayfa » UI / UX » Bu 500 bayt Javascript, kullanıcının imleç hareketlerini tahmin edebilir.

    Bu 500 bayt Javascript, kullanıcının imleç hareketlerini tahmin edebilir.

    JavaScript ile gerçekten harika şeyler yapabilirsiniz ve açık kaynak kodu bu işi daha da kolaylaştırır.

    Premonish gördüğüm en havalı kütüphanelerden biri ve sadece 500 bayt JavaScript. Bu eklentiyle, kullanıcının faresinin nereye hareket ettiğini tespit edebilir ve hangi öğeye yöneldiklerini tahmin edebilirsiniz..

    Bu karmaşık bir fikir gibi görünebilir, ancak uygulanması oldukça kolaydır. Bu tekliflerden bahsetmiyorum bile bir ton geliştiricilerin gerçekten harika efektler yaratması için fırsat vurgulu öncesi animasyonlar veya dinamik düzen efektleri.

    Sen başla bir öğeyi hedefleme sayfada ve Nasıl görüneceğini tanımlama kullanıcı bu elemana doğru ilerlerken.

    Tüm hesaplamalar Premonish kütüphanesi ile arka uçta yapılır, dolayısıyla bunun arkasındaki matematik veya mantık için endişelenmenize gerek yoktur.

    Bunun yerine, bir yol mu arıyorsunuz? tahminde bulunmak kullanıcının davranışının güven derecesine göre. Bunların hepsi JavaScript'e aktarılmıştır, böylece kendi işlevlerinizi yazabilirsiniz. kullanıcı davranışlarını ele almak.

    İşte bir örnek pasaj Premonish demosundan:

     premonish.onIntent ((el, confidence) => // el beklenen DOM elemanıdır // güven, bu tahminde ne kadar güvende olduğumuzla ilgili 0-1 puandır.); 

    onIntent () yöntem Premonish'e yazılır ve kütüphane ne zaman bildirilirse çağrılır. bazı elemanlara doğru ilerleyen bir kullanıcı.

    Başka bir yöntem de kullanabilirsiniz, onMouseMove (), hangi her zaman çalışır imleç X / Y konumlarını değiştirir ekranda. Bu şekilde Premonish’in kullanıcı amacının oranını nasıl hesapladığını görebilirsiniz..

    GitHub deposundaki ana bilgileri bulabilirsiniz. basit kod parçacıklarını içerir başlamak için. Başlatma sadece gerektirir bir dizi seçici veya DOM öğesi hedeflenmeli.

    Bu eklentiyi gerçekte nasıl kullandığınız tamamen size kalmış. Bu tam bir çözüm değil, size yardım etmek için bir başlangıç ​​noktası olmalı. kullanıcı niyetlerini üstlenmek ve bunun etrafında bir deneyim oluşturmak.

    Kontrol et canlı demo Tüm bunların nasıl çalıştığını görmek ve “hata ayıklama modu” Tahmin algoritmasının gerçek zamanlı olarak nasıl çalıştığını izleyebilirsiniz..

    Ayrıca düşüncelerinizi paylaşıp, yaratıcısı Matthew Conlen'in Twitter'daki @mathisonian'ı sayesinde de.