זה 500 בתים Javascript יכול לחזות תנועות הסמן של המשתמש

אתה יכול לעשות כמה דברים ממש מגניב עם JavaScript קוד פתוח קוד עושה את העבודה אפילו יותר קל.

Premonish הוא אחד הספריות הכי מגניב שראיתי וזה בנוי עם רק 500 בייטים של JavaScript. עם תוסף זה, אתה יכול לזהות היכן העכבר של המשתמש נע ולחזות לאיזה רכיב הם הולכים לכיוון.

זה אולי נשמע כמו רעיון מורכב אבל זה די קל ליישם. שלא לדבר על זה מציע טון של הזדמנות למפתחים ליצור כמה אפקטים מגניבים באמת כגון מראש לרחף הנפשות או אפקטים פריסה דינמית.

אתה מתחיל מיקוד אלמנט בדף ו הגדרת איך זה ייראה כאשר המשתמש מתקדם לכיוון אלמנט זה.

כל החישובים נעשים על backend עם ספריית Premonish, אז אתה לא צריך לדאוג לגבי המתמטיקה או ההיגיון מאחורי זה.

במקום זאת, אתה מחפש דרך להתמודד עם התחזית בהתבסס על דירוג ביטחון של התנהגות המשתמש. כל זה עבר לתוך JavaScript, כך שאתה יכול לכתוב את הפונקציות שלך להתמודד עם התנהגויות המשתמש.

הנה קטע טקסט לדוגמה מ הדגמה Premonish:

 (= el, confidence) => / el הוא אלמנט DOM הצפוי // אמון הוא ציון מ 0-1 עד כמה אנחנו בטוחים בתחזית זו.); 

ה onIntent () השיטה היא אפויה לתוך Premonish וזה נקרא בכל פעם הספרייה הודעות משתמש זז לכיוון אלמנט כלשהו.

ניתן גם להשתמש בשיטה אחרת, onMouseMove (), אשר פועל בכל פעם הסמן משנה X / Y עמדות על המסך. בדרך זו אתה יכול לראות איך Premonish הוא חישוב הסיכויים של כוונת המשתמש.

אתה יכול למצוא חבורה של מידע ריפו GitHub הראשי אשר כולל קטעי קוד פשוטים כדי להתחיל. אתחול דורש רק סדרה של בוררים או אלמנטים DOM כי צריך להיות ממוקד.

איך אתה בעצם להשתמש תוסף זה לגמרי תלוי בך. זה לא אמור להיות פתרון מלא, אלא נקודת התחלה לעזור לך להניח את כוונות המשתמש ולבנות חוויה סביב זה.

בדוק את דמו ישיר לראות איך כל זה עובד ולראות א “מצבug” שבו אתה יכול לראות איך אלגוריתם חיזוי עובד בזמן אמת.

אתה יכול גם לחלוק את המחשבות שלך ולהודות תודה ליוצר מתיו Conlen על שלו @ mathisonian לצפצף.