Animated Number Counter HTML – दोस्तों किसी web page को creative और attractive बनानें के लिए वेब designer काफी कुछ करते हैं जिनमें काफी web designer tricks का इस्तेमाल करना पसंद करते हैं.
आसान शब्दों में बात करें तो user का ध्यान खींचनें के लिए designer CSS और jQuery की tricks का उपयोग करते हैं जैसे की एनीमेशन, tab, accordion, click and scroll to div आदि.
दोस्तों user का ध्यान आकर्षित करनें के लिए और भी काफी तरीके हैं जिनमें Number Counter एक है. Number Counter की मदद से हम user को नंबर काउंट होते हुए दिखा सकते हैं जो देखनें में काफी attractive लगता है.
आज के आर्टिकल में आप सीखनें वाले हैं की HTML में नंबर काउंटर के क्या फायदे हैं, क्या नुकसान है और लास्ट में Animated Number Counter कैसे लगाते हैं अपनीं HTML website में.
Animated Number Counter के फायदे
एनिमेटेड काउंटर आपकी वेबसाइट पर आंकड़े दिखाने का एक शानदार तरीका है क्योंकि इन सब तरीकों से user experience में improvement होती है और आपकी वेबसाइट बाक़ियों से अलग दिखती है.
Animated counters का उपयोग आप site visitors, members registered, online game में नंबर दिखने के लिए कर सकते हैं. Animated counters किसी website को एक professional look दे सकता है जिससे user का trust website पर बढ़ता है और google लोगों के trust को नॉटिक भी करता है जिसके कारण website की रैंक improve हो सकती है और बहुत जल्द आपकी वेबसाइट गूगल के पहले पेज पर भी दिखाई दे सकती है.
Animated Number Counter के disadvantage
जब भी आप कुछ unique और बेहतर करने की कोशिस करते हैं किसी भी वेब पेज में तो उसके लिए कोडिंग ज्यादा करनी होती है और कोडिंग के आलावा कुछ other फाइल भी आपको add करनी होती हैं जैसे – jQuery आदि, जिसके कारण वेब पेज की फाइल्स का साइज़ बढ़ सकता है और फाइल साइज़ बढ़ने के कारण वेब पेज का लोडिंग टाइम बढ़ सकता है जो एक समस्या का कारण बन सकता है.
और google उन वेबसाइटों को कभी रैंक नहीं करता जिनका लोडिंग टाइम ज्यादा है या स्पीड कम है इसलिए इस तरह से काम करना चाहिए जिससे हमारा काम भी हो जाए ओर वेबसाइट की स्पीड भी बनी रहे.
Animated Number Counter HTML
दोस्तों जब हम HTML में किसी संख्या को jQuery से या फिर CSS से बढ़ते क्रम में दिखाते हैं तो उसे ही HTML counter कहा जाता है | HTML counter add करनें के लिए आपको HTML का document कुछ इस प्रकार तैयार करना होगा |
<ul class="main-container">
<li>
<div>
<span class="counter">200</span>
<p>Project Completed</p>
</div>
</li>
<li>
<div>
<span class="counter">5000</span>
<p>Happy Customers</p>
</div>
</li>
<li>
<div>
<span class="counter">4500</span>
<p>Satisfied Clients</p>
</div>
</li>
<li>
<div>
<span class="counter">9</span>
<p>Year Of Businss</p>
</div>
</li>
</ul>
HTML का format तैयार होने के बाद इसकी CSS आप अपने हिसाब से कर सकते है मैंने अपने हिसाब से CSS की है आप चाहें तो copy कर सकते हैं |
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #171a1c;
padding-top: 5rem;
}
h1 {
text-align: center;
color: #fff;
}
.main-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
padding: 0 20px;
}
.main-container li {
border-radius: 15px;
height: 200px;
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
box-shadow: 0px 4px 20px 1px #050b0c;
}
.main-container li span {
color: #fff;
font-size: 2rem;
margin-bottom: 5px;
display: block;
}
.main-container li div {
text-align: center;
}
.main-container li p {
font-size: 1rem;
color: #9da3a6;
}
.main-container li span::after {
content: "+";
margin-left: 5px;
}
.main-container li:nth-child(2) {
background: #22282a;
}
.main-container li:nth-child(3) {
background: #303436;
}
.main-container li:last-child {
background: #3d4143;
}
यहाँ तक हमनें सिर्फ HTML का document तैयार किया है और इसकी CSS की है लेकिन इतनें करनें से HTML में नंबर काउंट नहिं होंगें HTML नंबर काउंट करवानें के लिए हमें jQuery का सहारा लेना होगा.
design होनें के बाद हमें करनीं होगी jQuery की लाइब्रेरी add body tag के close होनें से पहले, हम CDN लिंक add कर रहें है आप CDN link वाली website पर जाकर jQuery का latest CDN लगा सकते हैं या फिर आप नीचे दिए गए CDN को कॉपी कर सकते हैं |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jQuery की लाइब्रेरी add करनें के बाद कुछ jQuery का कोड add करना है कुछ इस तरह से
<script>
$('.counter').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
दोस्तों इतनें step follow करनें के बाद आप देखेंगे की animated number counter आपके html में प्रोपर work कर रहा है.
इसके अलावा आप और भी आर्टिकल पढ़ सकते हैं
Conclusion
दोस्तों आज के आर्टिकल में आपने पढ़ा है Animated Number Counter के फायदे और नुक़सान, और आपने सिखा की कैसे एक वेबसाइट पर animated नम्बर काउंटर लगा सकते हैं.
उम्मीद है animated number counter HTML का आर्टिकल आपको helpful लगा होगा और अगर आपको वेब design से related आर्टिकल पढ़ते रहनें है continue तो आप वेबसाइट से जुड़े रहें और ताज़ा update पानें के लिए मेरे साथ social media से जुड़ें.
धन्यवाद…