"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > कूल कोडपेन डेमो (4 अक्टूबर)

कूल कोडपेन डेमो (4 अक्टूबर)

2024-11-16 को प्रकाशित
ब्राउज़ करें:299

Cool CodePen Demos (October 4)

हल्का जल विरूपण प्रभाव

केन्सिया कोंड्राशोवा ने पानी के प्रभाव वाले एक सुंदर शेडर के साथ एक डेमो बनाया। यह यथार्थवादी दिखता है, जैसे स्विमिंग पूल में पानी हिल रहा हो। यह शांत और सम्मोहक लगता है।


होवर पर 3डी लंबन प्रभाव

टेमानी अफ़िफ़ एकल छवि टैग का उपयोग करके अद्भुत प्रभाव बनाता है। यह एक बेहतरीन उदाहरण है: एक HTML टैग एक चौंकाने वाला 3D प्रभाव बनाता है... और कोड बहुत सरल है! डेमो के लिए बमुश्किल सीएसएस की 18 पंक्तियों की आवश्यकता होती है!


होवर पर चयनात्मक संतृप्ति

एकल छवि तत्व का उपयोग करके एक और बढ़िया डेमो। एना ट्यूडर ने कलर इंटरपोलेशन मास्क लगाने और रंग के आधार पर चित्र तत्वों को हाइलाइट करने के लिए एसवीजी फिल्टर का उपयोग किया।


कष्टप्रद आलू

सोफिया वुड (उर्फ फ्रैक्टल किट्टी) के इस मजेदार डेमो के लिए आपको स्पीकर की आवश्यकता होगी। आलू को बात करने के लिए ध्वनि बटन पर क्लिक करें या 1-8 बटन दबाएँ... लेकिन सावधान रहें, यह समान रूप से मनोरंजक और कष्टप्रद हो सकता है।


व्हील गैलरी (केवल सीएसएस)

क्रिस बोल्सन द्वारा बनाई गई एक एनिमेटेड गोलाकार गैलरी। चित्रों पर माउस ले जाएँ और उन्हें सजीव देखें। मुझे यह पसंद है कि शीर्षक फोटो मूवमेंट के साथ कैसे दिखता है। चिकना।


बिंदुवाद नासा छवियाँ

सोफिया वुड द्वारा एक और डेमो। उसने अनंत रूप से उत्पन्न होने वाले अंक उत्पन्न करने के लिए P5 का उपयोग किया। प्रत्येक चक्र में वे छोटे आकार के होंगे, जिससे एक अंतरिक्ष चित्र का पता चलेगा। हमेशा की तरह, कला और कोड का एक रचनात्मक संयोजन।


रंग-कंट्रास्ट चेकर तालिका

यह एक "बेवकूफ" एक्सेसिबिलिटी डेमो है: सभी सीएसएस रंग नामों और उनके रंग कंट्रास्ट संयोजन के साथ एक ग्रिड। डेव रूपर्ट ने परिणाम निर्धारित करने के लिए WCAG 2.1 विनिर्देश का उपयोग किया।


मेरे यार्ड का चिह्न

क्रिस कॉयियर ने इस प्रतिष्ठित चिह्न को दोहराया है, सभी पंक्तियों को उनके फ़ॉन्ट को गतिशील रूप से समायोजित करने के लिए स्क्रॉल-संचालित एनिमेशन लागू किया है (पाठ संपादन योग्य है) ताकि सभी पंक्तियां समान चौड़ाई पर कब्जा कर लें। क्योंकि यह एनीमेशन-रेंज प्रॉपर्टी का उपयोग करता है, यह डेमो केवल क्रोम पर काम करेगा।


स्क्रॉल-संचालित एनिमेटेड कार्ड स्टैक स्क्रॉल स्नैप इवेंट के साथ

पॉल नोबल स्क्रॉल-संचालित एनिमेशन को स्क्रॉल-स्नैप इवेंट के साथ मिलाकर एक शानदार कार्ड स्टैक बनाता है। अच्छे बदलावों का आनंद लेने के लिए आपको ट्रैकपैड का उपयोग करना होगा (यह डेमो माउस के साथ काम नहीं करेगा)।


त्वरित दोगुनी प्रगति

एना ट्यूडर द्वारा एक और डेमो। कोड साफ़, संक्षिप्त और अर्थपूर्ण है। मुझे इस घटक का डिज़ाइन पसंद आया (Reddit प्रश्न से?) और मैं खुद को कुछ परियोजनाओं में कुछ इसी तरह का उपयोग करते हुए देख सकता हूँ।



यदि आपको यह सूची पसंद आई है, तो पिछले महीने के डेमो देखें!

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/alvaromontoro/10-cool-codepen-demos-october-2024-1li0?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए स्टडी_गोलंग@163.com से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3