`यह फ्रंटएंड चैलेंज v24.09.04, सीएसएस आर्ट: स्पेस के लिए एक सबमिशन है।

प्रेरणा

मैं सीएसएस आर्ट और HTML का उपयोग करके हमारे सौर मंडल का एक इंटरैक्टिव और दृश्यमान रूप से आकर्षक प्रतिनिधित्व बनाना चाहता था। यह प्रेरणा अंतरिक्ष और आकाशीय पिंडों की सुंदरता के प्रति मेरे आकर्षण से आती है। इस परियोजना के माध्यम से, मेरा लक्ष्य न्यूनतम डिजाइन को इंटरैक्टिव तत्वों के साथ जोड़ना है जो उपयोगकर्ताओं को सौर मंडल में प्रत्येक ग्रह के बारे में जानने और जानने के लिए प्रोत्साहित करता है।

डेमो

लाइव डेमो: सौर मंडल का अन्वेषण करें
https://solar-system-explorer-css-art.vercel.app

आप नीचे एम्बेडेड कोड संपादक में प्रोजेक्ट का पूर्वावलोकन भी देख सकते हैं:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

यात्रा

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

ग्रहों को डिज़ाइन करना: मैंने मज़ेदार अन्तरक्रियाशीलता प्रदान करने वाले ग्रह कार्ड बनाने के लिए सीएसएस ग्रिड और होवर एनिमेशन के संयोजन का उपयोग किया। ग्रहों के नाम और मुख्य जानकारी गतिशील रूप से प्रस्तुत की जाती हैं।

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

अधिक जानकारी के लिए मॉडल: जब किसी ग्रह पर क्लिक किया जाता है, तो एक मॉडल अतिरिक्त जानकारी के साथ सामने आता है, जो एक गहन सीखने का अनुभव बनाता है। यह ऐप को इंटरैक्टिव और जानकारीपूर्ण दोनों बनाता है।

सीएसएस कला: किसी बाहरी छवि का उपयोग करने के बजाय, संपूर्ण सौर मंडल कला शुद्ध सीएसएस का उपयोग करके बनाई गई थी। मैंने ग्रहों के स्वरूप और अनुभव को अनुकरण करने के लिए आकार, रंग और चमक प्रभाव पर ध्यान केंद्रित किया।

प्रतिक्रियाशीलता: लेआउट पूरी तरह से उत्तरदायी है, यह सभी स्क्रीन आकारों के अनुकूल है ताकि यह सुनिश्चित किया जा सके कि उपयोगकर्ता किसी भी उपकरण से सौर मंडल का पता लगा सकें।

मैंने क्या सीखा:
सरल जावास्क्रिप्ट का उपयोग करके सीएसएस आर्ट को इंटरैक्टिव बनाने की चुनौती।
स्थिर तत्वों को जीवंत बनाने के लिए उन्नत होवर प्रभाव और एनिमेशन लागू करना।
प्रतिक्रियाशील और स्वच्छ लेआउट बनाने के लिए सीएसएस ग्रिड और फ्लेक्सबॉक्स की शक्ति।
आगे क्या होगा?
मेरी योजना अधिक विस्तृत ग्रह जानकारी जोड़ने और संभावित रूप से वास्तविकता के करीब अनुभव का अनुकरण करने के लिए ग्रहों के लिए एक इंटरैक्टिव 3डी दृश्य लागू करने की है।
ग्रह की घूर्णन गति और तापमान भिन्नता जैसे वास्तविक समय डेटा प्रदर्शित करने के लिए मोडल को बढ़ाना।`