विवरण

आप 404 पृष्ठों को कितनी बार प्राप्त करते हैं? आमतौर पर, वे स्टाइल में नहीं होते हैं और डिफ़ॉल्ट रहते हैं। हाल ही में मैंने test.do.am पाया है जो इंटरैक्टिव चरित्र ध्यान आकर्षित करता है और त्रुटि पृष्ठ को जीवंत करता है।

शायद, वहाँ सिर्फ एक बिल्ली की तस्वीर थी, फिर उन्होंने सोचा कि आँखों की गति बढ़ रही है और डेवलपर ने इस विचार को लागू किया। अब उपयोगकर्ता पृष्ठ पर जाता है और प्रभाव की जांच करता है। यह शांत और सुखद छोटी विशेषता है, यह पकड़ता है, फिर उपयोगकर्ता सहयोगियों या दोस्तों के साथ चर्चा करता है और यहां तक ​​कि इस सुविधा को दोहराता है। यह आसान हो सकता है, यदि नहीं:

1. उपयोगकर्ता द्वारा विंडो का आकार बदलने पर केंद्र बिंदु को नवीनीकृत नहीं किया जा रहा है। छोटी चौड़ाई के व्यूपोर्ट के साथ ब्राउज़र विंडो खोलें और पूर्ण स्क्रीन का आकार दें, बिल्ली कर्सर पर नहीं दिखती है।
2. केंद्र बिंदु को बाईं आंख पर रखा जाता है, न कि चक्र के दूरबीन केंद्र में।
3. जब उपयोगकर्ता आंखों के बीच कर्सर घुमाता है, तो आंखों के सेब एक साथ नहीं मिलते हैं और ध्यान केंद्रित नहीं करते हैं। आंखें अनंत को देख रही हैं, इसीलिए बिल्ली उपयोगकर्ता को नहीं देखती है, यह उसके माध्यम से दिखता है।
4. आंखों के आंदोलन तत्काल होते हैं, उन्हें सुचारू होने की आवश्यकता होती है।
5. मार्जिन-लेफ्ट / मार्जिन-टॉप चेंजिंग के कारण सेब की चाल होती है। यह गलत है, नीचे स्पष्टीकरण खोजें।
6. यदि कर्सर फुटर के नीचे है तो आंखें नहीं हिलती हैं।

मैं क्या सुझाव देता हूं

एक शुरुआत के लिए, आइए निर्दोष आंखों के आंदोलन को लागू करें।

1. मार्कअप तैयार करें

<div class="cat"> <div class="cat__eye _left"></div> <div class="cat__eye _right"></div> </div> 

2. आंखों के तत्वों के लिंक प्राप्त करें

 const cat = document.querySelector('.cat'); const eyes = cat.querySelectorAll('.cat__eye'); const eye_left = eyes[0]; const eye_right = eyes[1]; 

3. mousemove इवेंट श्रोता पंजीकृत करें और कर्सर निर्देशांक प्राप्त करें:

 let mouseX; let mouseY; window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; }) 

मैं विंडो ऑब्जेक्ट पर mousemove श्रोता को जोड़ता हूं, न कि डॉक्यूमेंट बॉडी के लिए, क्योंकि मुझे माउस निर्देशांक प्राप्त करने के लिए सभी स्क्रीन का उपयोग करने की आवश्यकता है।

4. आंदोलन
चूंकि मैं आंदोलनों को आसान बनाने जा रहा हूं, इसलिए मैं उन्हें मूसमोव हैंडलर में प्रबंधित नहीं कर सकता।

अद्यतन विधि जोड़ें जो अनुरोध द्वारा प्राप्त की जाएगी। आमतौर पर नवीनीकरण प्रति सेकंड 60 बार होता है, इसलिए हम हर 16.6 एमएस में 60 पिक्सल प्रति सेकंड देखते हैं।

यदि डेवलपर मान लेता है कि उपयोगकर्ता का ब्राउज़र अनुरोध का समर्थन नहीं कर सकता है। नामकरण, डेवलपर सेटटाइमआउट फ़ॉलबैक या रेडी-मेड पॉलीफ़िल का उपयोग कर सकता है।

 window.requestAnimationFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); 

समय में अद्यतन को नवीनीकृत करने या स्थिर लाने के लिए, मैंने चर शुरू किया

 let started = false; let mouseX; let mouseY; window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; if(!started){ started = true; update(); } }) function update(){ // Here comes eyes movement magic requestAnimationFrame(update); } 

इस तरह मुझे लगातार अपडेट विधि और कर्सर निर्देशांक मिलते रहे। फिर मुझे आंखों के अंदर सेब के आंदोलनों के मूल्यों को प्राप्त करने की आवश्यकता है।

मैं दोनों आंखों को एक तत्व के रूप में स्थानांतरित करने की कोशिश करता हूं

 let dx = mouseX - eyesCenterX; let dy = mouseY - eyesCenterY; let angle = Math.atan2(dy, dx); let distance = Math.sqrt(dx * dx + dy * dy); distance = distance > EYES_RADIUS ? EYES_RADIUS : distance; let x = Math.cos(angle) * distance; let y = Math.sin(angle) * distance; eye_left.style.transform = 'translate(' + x + 'px,' + y + 'px)'; eye_right.style.transform = 'translate(' + x + 'px,' + y + 'px)'; 

बहुत सरल: डीएक्स और डाई खोजें, जो आंखों के केंद्र और माउस के बीच अंतर का समन्वय करते हैं, केंद्र से लेकर कर्सर तक के कोण को ढूंढते हैं, Math.cos और Math.sin विधियों का उपयोग करके क्षैतिज और ऊर्ध्वाधर के लिए आंदोलन मूल्य प्राप्त करते हैं। टर्नरी ऑपरेटर का उपयोग करें और आंखों के आंदोलन क्षेत्र को सीमित करें।


Y मान पहले Math.atan2 विधि के लिए दिया जाता है, फिर x मान। परिणामस्वरूप उपयोगकर्ता आंखों की गति और कोई ध्यान केंद्रित करने की अप्राकृतिकता को नोटिस करता है।

एक-दूसरे के संदर्भ के बिना प्रत्येक आंखें मूव करें और देखें।

 // left eye let left_dx = mouseX - eyesCenterX + 48; let left_dy = mouseY - eyesCenterY; let left_angle = Math.atan2(left_dy, left_dx); let left_distance = Math.sqrt(left_dx * left_dx + left_dy * left_dy); left_distance = left_distance > EYES_RADIUS ? EYES_RADIUS : left_distance; let left_x = Math.cos(left_angle) * left_distance; let left_y = Math.sin(left_angle) * left_distance; eye_left.style.transform = 'translate(' + left_x + 'px,' + left_y + 'px)'; // right eye let right_dx = mouseX - eyesCenterX - 48; let right_dy = mouseY - eyesCenterY; let right_angle = Math.atan2(right_dy, right_dx); let right_distance = Math.sqrt(right_dx * right_dx + right_dy * right_dy); right_distance = right_distance > EYES_RADIUS ? EYES_RADIUS : right_distance; let right_x = Math.cos(right_angle) * right_distance; let right_y = Math.sin(right_angle) * right_distance; eye_right.style.transform = 'translate(' + right_x + 'px,' + right_y + 'px)'; 

दिलचस्प लेकिन पिछले परिणाम से भी बदतर, आँखें स्वतंत्र रूप से ऊपर और नीचे चलती हैं। इसलिए मैंने पहले डेमो का उपयोग एक आंदोलन मैकेनिक बेसिक के रूप में किया और कर्सर के चरित्र के केंद्र के बारे में देखते हुए आंखों के सेब को एक साथ मिलाया।

मैं पूरे कोड का वर्णन नहीं करूंगा, कृपया इसका परिणाम देखें:


परीक्षण और त्रुटि से मैंने आंखों के आंदोलन और ध्यान केंद्रित करने के लिए आवश्यक मापदंडों का मिलान किया है। इसलिए अब मुझे स्मूथी चाहिए।

चौरसाई

लिंक ट्वेनमैक्स लाइब्रेरी और कोड कुछ इस तरह से?

 TweenMax.to( eye, 0.15, {x: x, y: y}); 

सरल कार्य के लिए पूरे काम को जोड़ने का कोई मतलब नहीं है, इसलिए, मैं खरोंच से चौरसाई करता हूं।

यह मामला रखें कि पृष्ठ पर केवल एक ही आंख तत्व है और इसका विस्थापन क्षेत्र केवल सीमित नहीं है। मूल्‍यों का मूवमेंट सम्‍मिलित करने के लिए, मैं इस मैकेनिक का उपयोग करता हूं:

 const SMOOTHING = 10; x += (needX - x) / SMOOTHING; y += (needY - y) / SMOOTHING; eye.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)'; 

मैं एक अन्य रेंडरिंग स्ट्रीम में आँखों को अलग करने और उन्हें गति देने के लिए Transl3d का उपयोग करता हूं।

चाल यह है कि प्रत्येक 16.6ms (60 pics प्रति सेकंड) चर x और y में आवश्यक मान हैं। प्रत्येक नवीकरण अंतर के 1/10 के लिए इसके आवश्यक मूल्य को बंद कर देता है।

 let x = 0; let needX = 100; let SMOOTHING = 2; function update(){ x += (needX - x) / SMOOTHING; console.log(x); } 

फिर हर 16.6 एमएस नवीनीकरण में हमें सरल स्मूथिंग और अगले x मान (लगभग) मिलते हैं:

 50 75 87.5 93.75 96.875 98.4375 99.21875 99.609375 100 

एक और अधिक स्पष्ट चाल:

- वर्कलोड को अनुकूलित करने के लिए यह परीक्षा शुरू करें

 if(x != needX || y != needY){ eye.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)'; } 

लेकिन आपको एक्स को एक्सएक्सएक्स की बराबरी करनी होगी जब वे करीब पहुंचते हैं क्योंकि आंखों की स्थिति लगभग समान होती है

 if(Math.abs(x - needX) < 0.25){ x = needX; } if(Math.abs(y - needY) < 0.25){ y = needY; } 

अन्यथा x और y मान जरूरतमंदों और जरूरतमंदों तक बहुत लंबे समय तक पहुंचते रहेंगे; कोई दृश्य अंतर नहीं होगा, लेकिन हर स्क्रीन परिवर्तन आंखों की शैलियों को प्रभावित करेगा। Btw आप अपने आप को इसके साथ चारों ओर बेला कर सकते हैं।

 let x = 0; let needX = 100; let smoothing = 2; function update(){ x += (needX - x) / smoothing; if( Math.abs(x - needX) > 0.25 ){ // replace 0.25 with anything else and check number of x renewals. window.requestAnimationFrame(update); } else { x = needX; } console.log( x.toString(10) ); } update(); 

- यदि उपर्युक्त यांत्रिकी स्पष्ट है, तो आप अधिक जटिल प्रभाव बना सकते हैं, जैसे वसंत। सबसे सरल चौरसाई और कर्सर सन्निकटन इस तरह दिखता है:

 x += (mouseX - x) / smoothing; y += (mouseY - y) / smoothing; 

आवश्यक और वर्तमान निर्देशांक मानों के बीच अंतर को चौरसाई जोड़ें।


कभी-कभी सन्निकटन सीमा समझ में आता है। ऊपर उदाहरण है जहां मान 0 से 100 तक बदलता है, इसलिए 1 पुनरावृत्ति मूल्य "50" तक पहुंचता है, यह 1 चरण के लिए बहुत बड़ा आंकड़ा है। यह यांत्रिकी थोड़े से अकिलीज़ और कछुए के विरोधाभास को याद दिलाता है


पलक झपकाना

हर 2-3 सेकंड में आंखों के सेब को छिपाएं और दिखाएं। सबसे तुच्छ विधि है "प्रदर्शन: कोई नहीं?", "रूपांतर: पैमाना (एन)" वाई-स्केल के गतिशील मूल्य के साथ थोड़ा अधिक जटिल है।

2 काँस्ट बनाएँ

const BLINK_COUNTER_LIMIT = 180; - निमिष की शुरुआत से पहले नवीकरण की संख्या,
const BLINKED_COUNTER_LIMIT = 6; - एक पलक के दौरान नवीकरण की संख्या।

और 2 चर, जो मूल्यों को हर नवीकरण बदल जाएगा।

 let blinkCounter = 0; let blinkedCounter = 0; 

पलक का कोड

 let blinkTransform = ''; blinkCounter++; if(blinkCounter > BLINK_COUNTER_LIMIT){ blinkedCounter++ if(blinkedCounter > BLINKED_COUNTER_LIMIT){ blinkCounter = 0; } else { blinkTransform = ' scaleY(' + (blinkedCounter / BLINKED_COUNTER_LIMIT) + ')'; } } else { blinkedCounter = 0; } 

ब्लिंकट्रांसफॉर्म वह स्ट्रोक वैरिएबल है जिसमें विंकिंग के दौरान रिंकिंग और फॉलोइंग के बीच की खाली वैल्यू होती है

 ' scaleY(0.17)' ' scaleY(0.33)' ' scaleY(0.50)' ' scaleY(0.67)' ' scaleY(0.83)' ' scaleY(1.00)' 

सभी गणना परिवर्तनीय ब्लिंक ट्रांसफ़ॉर्म देते हैं, जिसका मान आँखों की स्थिति परिवर्तन के सीएसएस कोड में जोड़ा जाना चाहिए। इस प्रकार खाली स्ट्रिंग को 3 एस डाउन समय के मामले में जोड़ा जाता है और यह आंखों के पैमाने पर प्रभाव नहीं डालता है, सीएसएस मूल्य ब्लिंकिंग के दौरान जोड़ा जाता है।

 eye_left.style.transform = 'translate(' + xLeft + 'px,' + y + 'px)' + blinkTransform; eye_right.style.transform = 'translate(' + xRight + 'px,' + y + 'px)' + blinkTransform; 

कहानी का पाठ

हर दिन हम ऐसी चीजों को पूरा करते हैं जो सरल और स्पष्ट लगती हैं और हम यह भी नहीं समझते हैं कि यह बाहरी सरलता सवालों और सुधारों की एक विशाल राशि को छिपाती है। मेरी राय में शैतान उन विवरणों में है जो संपूर्ण अंतिम परिणाम बनाते हैं। 20 वीं शताब्दी के सर्वश्रेष्ठ मुक्केबाज मुहम्मद अली ने सीधे पंच के क्षण में पीछे के पैर की एड़ी को उठाया। इस पैंतरेबाज़ी ने प्रभावी दूरी को बढ़ाया और उसे जीतने के लिए और अधिक मौके दिए। इसने हमेशा काम किया।

PS मुझे वेबसाइट पर कोई असर नहीं पड़ा है और आशा है कि इसके मालिक मेरी टिप्पणियों पर अपराध नहीं करेंगे। सुविधा के लिए मैंने कोड में आंख = आंख का सेब नाम दिया।