? परिचय

क्या आपने कभी ऐसी घड़ी बनाना चाहा है जो समय बताने के अलावा और भी बहुत कुछ करती हो? क्या होगा अगर हर सेकंड जो बीतता है वह एक नया विषय ला सकता है? CSS @property और hsl() रंग हेरफेर की शक्ति के साथ, आप यह कर सकते हैं! इस लेख में, मैं आपको एक गतिशील और दृष्टि से आकर्षक "थीम क्लॉक" की निर्माण प्रक्रिया के बारे में बताऊंगा जो हर सेकंड अपना रंग (उर्फ इसकी थीम) बदलती है, और हर पल में एक नया जीवन लाती है!

?️ अवधारणा

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

? डेमो और कोड

खैर, यहां "थीम क्लॉक" का पूरा कोड है। मैं यह समझने के लिए इसे तोड़ूंगा कि प्रत्येक भाग समग्र प्रभाव में कैसे योगदान देता है।

? कोड को तोड़ना

1.सीएसएस कस्टम प्रॉपर्टीज और @प्रॉपर्टी: इस थीम-चेंजिंग घड़ी के पीछे का जादू सीएसएस कस्टम प्रॉपर्टीज और @प्रॉपर्टी नियम के उपयोग में निहित है। हम एक कस्टम प्रॉपर्टी --एंगल को परिभाषित करते हैं जो एचएसएल() फ़ंक्शन का उपयोग करके घड़ी के रंगों के रंग को नियंत्रित करता है। @keyframes नियम के साथ इस संपत्ति को 60 सेकंड से अधिक एनिमेट करके, हम एक निरंतर रंग परिवर्तन प्राप्त करते हैं।

• कस्टम प्रॉपर्टी --एंगल: यह एचएसएल() रंग के रंग को नियंत्रित करता है, थीम को गतिशील रूप से बदलता है। और कस्टम प्रॉपर्टी को एनिमेटेबल भी बनाता है, जिससे सहज बदलाव की अनुमति मिलती है।
• सीएसएस @कीफ्रेम एनीमेशन: यह एनीमेशन पूरे रंग स्पेक्ट्रम के माध्यम से चक्र करते हुए, 60 सेकंड में रंग मान को 0 से 360 तक घुमाता है।

2.डायनामिक थीम स्विचिंग: टॉगल बटन उपयोगकर्ताओं को प्रकाश और अंधेरे थीम के बीच स्विच करने की अनुमति देता है। बटन क्लिक करने से HTML तत्व पर एक डार्क क्लास चालू हो जाती है, जिससे घड़ी का स्वरूप बदल जाता है।

• लाइट/डार्क मोड टॉगल: थीम को एक बटन के साथ स्विच किया जा सकता है जो घड़ी की उपस्थिति को गतिशील रूप से अपडेट करता है।
• कंटेनर रोटेशन एनिमेशन: थीम बदलने पर क्लॉक कंटेनर घूमता है, जिससे एक सूक्ष्म संक्रमण प्रभाव जुड़ता है।

3.घड़ी और समय अद्यतन: कोड का जावास्क्रिप्ट भाग घड़ी की सूइयों और डिजिटल समय प्रदर्शन को अद्यतन करने का काम संभालता है। सेटटाइम फ़ंक्शन हर सेकंड घंटे, मिनट और सेकेंड हैंड की स्थिति की पुनर्गणना करता है, साथ ही समय और दिनांक डिस्प्ले को भी अपडेट करता है।

• "स्केल" फ़ंक्शन: वर्तमान समय को घड़ी की सुईयों के घूमने के लिए संबंधित डिग्री में परिवर्तित करता है।

- वास्तविक समय अपडेट: वर्तमान समय से मेल खाने के लिए घड़ी की सूइयां और डिजिटल समय हर सेकंड अपडेट किया जाता है।

? सभी भागों को एक साथ लाना

सीएसएस कस्टम गुणों, एचएसएल() रंग हेरफेर और @प्रॉपर्टी नियम की शक्ति को मिलाकर, हमने एक ऐसी घड़ी बनाई है जो न केवल समय बताती है बल्कि हर गुजरते सेकंड के साथ दिखने में भी विकसित होती है। यह प्रोजेक्ट इस बात का एक बेहतरीन उदाहरण है कि कैसे सीएसएस का उपयोग न्यूनतम जावास्क्रिप्ट के साथ इंटरैक्टिव और दृश्य रूप से आकर्षक वेब तत्व बनाने के लिए किया जा सकता है।

एक लाइक करें ❤️, और अधिक के लिए फॉलो करें alishat128