🖐🏻 ⚗️ 🦁 एनिमेटेड फेविकॉन्स का विकास 👃🏿 🤦🏼 👨🏻‍🎤

यह पहली चीज है जब वे ब्राउज़र टैब के बीच स्विच करते हैं। हमने सिर्फ एक संभावित विवरण दिया है जिसे फ़ेविकॉन कहा जाता है। स्क्रीन स्पेस जो वेब पेज के टैब टैब पर कब्जा कर लेता है, वह कई लोगों के विचार से अधिक मूल्यवान संसाधन है। यदि आप लेबल के साथ अच्छी तरह से काम करते हैं, तो, पृष्ठ पहचानकर्ता की भूमिका निभाने के अलावा, यह एक "संदेश बोर्ड" जैसा कुछ बन सकता है जो आपको बताता है कि पृष्ठ पर वास्तव में क्या हो रहा है।

फ़ेविकॉन

फ़ेविकॉन वास्तव में, विशेष रूप से उपयोगी होते हैं जब यह निष्क्रिय ब्राउज़र टैब की बात आती है। एक उदाहरण पर विचार करें।

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

यह सिर्फ मामला है जब आप रचनात्मक हो सकते हैं! अगर हम डायनामिक रूप से उन पिक्सेल को बदल सकते हैं जो फ़ेविकॉन बनाते हैं और पृष्ठ शॉर्टकट पर फ़ाइल अपलोड प्रक्रिया के बारे में जानकारी प्रदर्शित करते हैं? वास्तव में, यह वही है जो हम यहां करेंगे।

इसका समर्थन करने वाले ब्राउज़रों में, आप जावास्क्रिप्ट, HTML <canvas> और प्राचीन ज्यामिति नियमों का उपयोग करके कुछ एनीमेशन को फ़ेविकॉन के रूप में प्रदर्शित कर सकते हैं।

यहाँ ब्राउज़र टैब में लोडिंग एनीमेशन कैसा दिखता है।

तुरंत व्यापार के लिए नीचे उतरें और सबसे सरल से शुरुआत करें। अर्थात्, पृष्ठ के HTML कोड में <link> और <canvas> तत्व जोड़ें:

 <head>    <link rel="icon" type="image/png" href="" width=32px> </head> <body>    <canvas width=32 height=32></canvas> </body>

व्यवहार में इस तकनीक का उपयोग करते समय, आप संभवतः <canvas> को छिपाना चाहते हैं। ऐसा करने का एक तरीका hidden HTML विशेषता का उपयोग करना है:

 <canvas hidden width=32 height=32></canvas>

मैं दिखाई देने वाले <canvas> को छोड़ने जा रहा हूं ताकि हम देख सकें कि एनीमेशन को एक साथ फ़ेविकॉन और <canvas> दोनों पर कैसे प्रदर्शित किया जाए। दोनों में एक मानक फ़ेविकॉन का आकार है - 32x32 पिक्सेल।

प्रदर्शन उद्देश्यों के लिए, हम पृष्ठ पर एक बटन जोड़ेंगे, जिस पर क्लिक करके एनीमेशन शुरू होता है। पृष्ठ के HTML कोड में निम्नलिखित जोड़ें:

 <button>Load</button>

अब जावास्क्रिप्ट कोड में आते हैं। आइए पहले canvas समर्थन की जांच करें:

 onload = ()=> {  canvas = document.querySelector('canvas'),  context = canvas.getContext('2d');  if (!!context) {      /*  canvas */  } };

अगला - बटन क्लिक ईवेंट हैंडलर कनेक्ट करें, जिसका उपयोग <canvas> में एनीमेशन शुरू करने के लिए किया जाएगा:

 button = document.querySelector('button'); button.addEventListener('click', function() {    /* ,     */    n = 0,    /*    */    loadingInterval = setInterval(drawLoader, 60); });

drawLoader इकाई जिसे हमने drawLoader पारित किया है, एक फ़ंक्शन है जिसे 60 मिलीसेकंड अंतराल पर बुलाया जाएगा और <canvas> लिए कुछ उत्पादन किया जाएगा। इस फ़ंक्शन के लिए कोड लिखने से पहले, हम उस रेखा शैली का वर्णन करते हैं जिसका उपयोग हम धीरे-धीरे एक वर्ग खींचने के लिए करेंगे, जो एक लोडिंग संकेतक है।

 /*  ,         */ let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;

drawLoader फ़ंक्शन में drawLoader हम इस आधार पर रेखाएँ drawLoader कि एनीमेशन के कितने प्रतिशत कदम पहले ही पूरे हो चुके हैं। हमारे मामले में, 1 एनीमेशन कदम 1% से मेल खाता है। अर्थात्, पहले 25% चरणों के दौरान, वर्ग के ऊपरी भाग का प्रतिनिधित्व करने वाली एक रेखा धीरे-धीरे प्रदर्शित की जाएगी। अगले 25% चरण वर्ग के दाईं ओर प्रदर्शित होंगे, और इसी तरह - प्रत्येक पक्ष पर 25% एनीमेशन समय।

एनीमेशन प्रभाव <canvas> की सामग्री को मिटाकर और पिछले चरण की तुलना में थोड़ी लम्बी रेखा का उत्पादन करके प्राप्त किया जाता है। एनीमेशन के प्रत्येक चरण पर, छवि के उत्पादन के बाद <canvas> हो गया है, छवि को जल्दी से पीएनजी प्रारूप में बदल दिया जाता है और पृष्ठ फ़ेविकॉन के रूप में सेट किया जाता है।

 function drawLoader() {  with(context) {    clearRect(0, 0, 32, 32);    beginPath();    /*  25% ,   */    if (n<=25){      /*        (0,0)-----(32,0)      */      //          }    /*  25  50  */    else if(n>25 && n<=50){      /*        (0,0)-----(32,0)                  |                  |                  (32,32)      */      //       .    }    /*  50  75  */    else if(n>50 && n<= 75){      /*        (0,0)-----(32,0)                  |                  |        (0,32)----(32,32)      */      //    ,    .    }      /*  75  100  */    else if(n>75 && n<=100){      /*        (0,0)-----(32,0)            |   |            |   |        (0,32)----(32,32)      */      //       .    }    stroke();  }  //  ,     <canvas>,   PNG,       favicon.href = canvas.toDataURL('image/png');  /*  ,    */  if (n === 100) {    clearInterval(loadingInterval);    return;  }  //  ,       n++; }

अब चलो गणना करते हैं जो हमें आवश्यक लाइनें खींचने में मदद करेगा।

एनीमेशन के पहले 25 चरणों के दौरान वर्ग के ऊपरी हिस्से को धीरे-धीरे आउटपुट करने के लिए कौन से डेटा का उपयोग किया जाता है:

प्रारंभिक बिंदु छवि के ऊपरी बाएं कोने (0,0) है।
n वर्तमान एनीमेशन कदम की संख्या है।
x वर्तमान एनीमेशन कदम पर लाइन के अंत बिंदु का x समन्वय है।
y अंतिम बिंदु का y निर्देशांक है, जो 0 है।

हमें यह चाहिए कि एनीमेशन के सभी 25 चरणों को पूरा करने के बाद, x का मान 32 होगा (अर्थात, फ़ेविकॉन का आकार और <canvas> )। इसलिए, हम निम्नलिखित सूत्र के अनुसार वर्तमान एनीमेशन कदम n पर x के मूल्य की खोज करेंगे:

 x = (32/25) * n

यहाँ रेखा ड्राइंग कोड कैसा दिखता है जिसमें यह तर्क लागू किया गया है:

 moveTo(0, 0); lineTo((32/25)*n, 0);

निम्नलिखित 25 एनीमेशन चरणों (वर्ग के दाईं ओर ड्राइंग) को इसी तरह से किया जाता है:

 moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));

और यहाँ drawLoader फ़ंक्शन का पूर्ण कोड है:

 function drawLoader() {  with(context) {    clearRect(0, 0, 32, 32);    beginPath();    /*  25% ,   */    if (n<=25){      /*        (0,0)-----(32,0)      */      moveTo(0, 0); lineTo((32/25)*n, 0);    }    /*  25  50  */    else if(n>25 && n<=50){      /*        (0,0)-----(32,0)                  |                  |                  (32,32)      */      moveTo(0, 0); lineTo(32, 0);      moveTo(32, 0); lineTo(32, (32/25)*(n-25));    }    /*  50  75  */    else if(n>50 && n<= 75){      /*        (0,0)-----(32,0)                  |                  |        (0,32)----(32,32)      */      moveTo(0, 0); lineTo(32, 0);      moveTo(32, 0); lineTo(32, 32);      moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32);    }      /*  75  100  */    else if(n>75 && n<=100){      /*        (0,0)-----(32,0)            |   |            |   |        (0,32)----(32,32)      */      moveTo(0, 0); lineTo(32, 0);      moveTo(32, 0); lineTo(32, 32);      moveTo(32, 32); lineTo(0, 32);      moveTo(0, 32); lineTo(0, -((32/25)*(n-100)));    }    stroke();  }  //  ,     <canvas>,   PNG,       favicon.href = canvas.toDataURL('image/png');  /*  ,    */  if (n === 100) {    clearInterval(loadingInterval);    return;  }  //  ,       n++; }

परिणाम

वह सब है! एक आयताकार लोडिंग संकेतक बनाने के लिए कोड, जिसे हम यहां विकसित कर रहे थे, इस भंडार में पाया जा सकता है। और यहाँ डाउनलोड परिपत्र संकेतक कोड के साथ भंडार है। वास्तव में, आप, एक समान संकेतक के रूप में, किसी भी आकार का उपयोग कर सकते हैं। और यदि आप <canvas> की fill विशेषता के साथ काम करते हैं, तो यह आपको दिलचस्प प्रभाव प्राप्त करने की अनुमति देगा।

प्रिय पाठकों! क्या आपके क्षेत्र में कोई परियोजना है जो एनिमेटेड फ़ेविकॉन से लाभान्वित होगी?

एनिमेटेड फेविकॉन्स का विकास

परिणाम

More articles: