JavaScript के बिना एनिमेटेड काउंटर
यहाँ के काउंटर डिज़ाइनों में से काफ़ी सारे हिलते-डुलते हैं। संख्या खुद गिनती करते हुए ऊपर जाती है, या पैनल खुद को बनाता हुआ सामने आता है, या कुछ गिरकर अपनी जगह पर टिक जाता है।
इनमें से किसी में भी JavaScript की एक भी लाइन नहीं है।
यह कैसे काम करता है
काउंटर SVG हैं, और SVG अपनी स्टाइलशीट साथ लेकर चल सकता है। हलचल CSS कीफ़्रेम से आती है, जो इमेज के अंदर ही लिखे होते हैं, इसलिए पूरा काउंटर एक ही फ़ाइल में, एक ही अनुरोध में पहुँचता है और अपने-आप चलने लगता है। ब्राउज़र इसे वैसे ही संभालता है जैसे किसी भी दूसरे CSS एनिमेशन को: कंपोज़िटर पर, किसी स्क्रिप्ट को जगाए बिना।
व्यावहारिक नतीजा यह है कि एनिमेटेड काउंटर का खर्च उतना ही है जितना स्थिर काउंटर का। इनका आकार लगभग 1.8 से 3.2 KB के बीच रहता है। न कोई लाइब्रेरी, न दूसरा अनुरोध, और लोड होते समय बाकी पेज को रोकने वाली कोई चीज़ नहीं।
हलचल के प्रकार
इन्हें इस आधार पर बाँटा गया है कि ये कैसे हिलते हैं, इस आधार पर नहीं कि ये दिखते कैसे हैं, क्योंकि चुनाव असल में इसी बात पर टिका होता है:
- बनते हुए – काउंटर रेखा-दर-रेखा खुद को बनाता हुआ सामने आता है।
- वज़न के साथ – कुछ गिरता है, उछलता है और फिर टिक जाता है। ऐसी हलचल, जिसमें वज़न का एहसास हो।
- भविष्यवादी, गतिशील – चमक, स्कैन लाइनें, बहता हुआ कोहरा। तीनों में सबसे भड़कीला।
एक शांत भविष्यवादी परिवार भी है, उन मामलों के लिए जहाँ यह रूप तो चाहिए, पर हलचल नहीं। यह लिखते समय उपलब्ध डिज़ाइनों में से 58 एनिमेटेड हैं – उससे कहीं ज़्यादा, जितने बनाने का किसी ने शुरू में इरादा किया था।
जब किसी विज़िटर ने कम हलचल चाही हो
ऑपरेटिंग सिस्टम में एनिमेशन कम करने की एक सेटिंग होती है। लोग इसे हलचल के प्रति संवेदनशीलता, संतुलन से जुड़ी (वेस्टिबुलर) समस्याओं या माइग्रेन की वजह से चालू करते हैं, और कभी-कभी सिर्फ़ इसलिए कि पेज पर हिलती चीज़ें थका देती हैं। ब्राउज़र यह पसंद हर पेज तक पहुँचा देता है।
ये काउंटर इसका सम्मान करते हैं। अगर किसी विज़िटर ने अपने सिस्टम में हलचल कम करने को कहा है, तो एनिमेशन नहीं चलता और उसे उसी संख्या वाला स्थिर काउंटर दिखता है। यह पोस्ट लिखते समय इसे डिज़ाइन-दर-डिज़ाइन जाँचा गया, मान नहीं लिया गया।
इसका सम्मान करने में स्टाइलशीट की बस एक लाइन लगती है, और यही सजावट और सिरदर्द के बीच का फ़र्क है।
इनके इस्तेमाल के खिलाफ़ एक बात
हलचल नज़र खींचती है। इसका पूरा मकसद यही है, और संयम के पक्ष में तर्क भी यही है।
अगर पेज काउंटर के बारे में नहीं है – और ज़्यादातर पेज नहीं होते – तो कोने में हिलती चीज़ विज़िटर के ध्यान के लिए असली सामग्री से होड़ करती है, जबकि पेज उसी सामग्री के लिए बना था। स्थिर काउंटर बिना कुछ माँगे वही संख्या बता देता है।
एनिमेटेड काउंटर वहाँ इस्तेमाल करें जहाँ काउंटर पेज के मिज़ाज का हिस्सा हो: कोई निजी वेबसाइट, कोई प्रोजेक्ट पेज, कुछ ऐसा जिसमें थोड़ी दिखावटी अदा हो। जिस पेज पर कोई पढ़ने की कोशिश कर रहा हो, वहाँ ऐसा काउंटर चुनें जो स्थिर रहे।