मुखपृष्ठ » यूआई / UX » यह 500 बाइट्स जावास्क्रिप्ट उपयोगकर्ता के कर्सर आंदोलनों का अनुमान लगा सकता है

    यह 500 बाइट्स जावास्क्रिप्ट उपयोगकर्ता के कर्सर आंदोलनों का अनुमान लगा सकता है

    आप जावास्क्रिप्ट के साथ कुछ बहुत अच्छी चीजें कर सकते हैं और ओपन सोर्स कोड काम को और भी आसान बना देता है.

    Premonish सबसे अच्छे पुस्तकालयों में से एक है जिसे मैंने देखा है और इसे बनाया गया है जावास्क्रिप्ट के केवल 500 बाइट्स. इस प्लगइन से, आप यह पता लगा सकते हैं कि उपयोगकर्ता का माउस कहाँ घूम रहा है और भविष्यवाणी कर रहा है कि वे किस तत्व की ओर जा रहे हैं.

    यह एक जटिल विचार की तरह लग सकता है लेकिन इसे लागू करना काफी आसान है। इस प्रस्ताव का उल्लेख नहीं करने के लिए एक टन डेवलपर्स के लिए अवसर के रूप में कुछ वास्तव में अच्छा प्रभाव बनाने के लिए पूर्व मंडराना एनिमेशन या गतिशील लेआउट प्रभाव.

    आप शुरू करें किसी तत्व को लक्षित करना पेज पर और परिभाषित करना कि यह कैसा दिखेगा जब उपयोगकर्ता उस तत्व की ओर बढ़ रहा है.

    सभी गणना प्रेमोनिश लाइब्रेरी के साथ बैकएंड पर की जाती हैं, इसलिए आपको इसके पीछे गणित या तर्क के बारे में चिंता करने की आवश्यकता नहीं है.

    इसके बजाय, आप एक रास्ता तलाश रहे हैं भविष्यवाणी को संभालें उपयोगकर्ता के व्यवहार की एक आत्मविश्वास रैंकिंग के आधार पर। यह सब जावास्क्रिप्ट में पारित किया गया है, ताकि आप अपने कार्यों को लिख सकें उपयोगकर्ता व्यवहार को संभालें.

    यहाँ ए उदाहरण स्निपेट प्रेमोनिश डेमो से:

     premonish.onIntent ((el, confidence) => // el है अपेक्षित DOM एलिमेंट // कॉन्फिडेंस 0-1 से एक स्कोर है कि हम इस भविष्यवाणी में कितने आश्वस्त हैं।); 

    onIntent () विधि को प्रेमोनिश में बेक किया जाता है और इसे जब भी लाइब्रेरी नोटिस किया जाता है एक उपयोगकर्ता कुछ तत्व की ओर बढ़ रहा है.

    आप दूसरी विधि का भी उपयोग कर सकते हैं, onMouseMove (), जो हर बार चलता है कर्सर X / Y स्थान बदलता है स्क्रीन पर। इस तरह से आप देख सकते हैं कि प्रेमोनिष उपयोगकर्ता के इरादों की गणना कैसे कर रहा है.

    आप मुख्य GitHub रेपो में जानकारी का एक गुच्छा पा सकते हैं सरल कोड स्निपेट शामिल हैं आरंभ करने के लिए। प्रारंभ में केवल आवश्यकता है चयनकर्ताओं या DOM तत्वों की एक श्रृंखला उसे निशाना बनाया जाना चाहिए.

    आप वास्तव में इस प्लगइन का उपयोग कैसे करते हैं यह पूरी तरह से आप पर निर्भर है। इसका अर्थ पूर्ण समाधान होना नहीं है, बल्कि आपकी सहायता के लिए एक प्रारंभिक बिंदु है उपयोगकर्ता के इरादों को मानें और उस के आसपास एक अनुभव का निर्माण.

    इसकी जाँच पड़ताल करो लाइव डेमो यह देखने के लिए कि यह सब कैसे काम करता है और कैसे देखें “डिबग मोड” जहां आप देख सकते हैं कि वास्तविक समय में भविष्यवाणी एल्गोरिथ्म कैसे काम करता है.

    आप अपने विचारों को साझा कर सकते हैं और निर्माता मैथ्यू कॉनलेन को उनके ट्विटर @ मैथिसियन पर धन्यवाद कह सकते हैं.