केन्सिया कोंड्राशोवा ने पानी के प्रभाव वाले एक सुंदर शेडर के साथ एक डेमो बनाया। यह यथार्थवादी दिखता है, जैसे स्विमिंग पूल में पानी हिल रहा हो। यह शांत और सम्मोहक लगता है।
टेमानी अफ़िफ़ एकल छवि टैग का उपयोग करके अद्भुत प्रभाव बनाता है। यह एक बेहतरीन उदाहरण है: एक HTML टैग एक चौंकाने वाला 3D प्रभाव बनाता है... और कोड बहुत सरल है! डेमो के लिए बमुश्किल सीएसएस की 18 पंक्तियों की आवश्यकता होती है!
एकल छवि तत्व का उपयोग करके एक और बढ़िया डेमो। एना ट्यूडर ने कलर इंटरपोलेशन मास्क लगाने और रंग के आधार पर चित्र तत्वों को हाइलाइट करने के लिए एसवीजी फिल्टर का उपयोग किया।
सोफिया वुड (उर्फ फ्रैक्टल किट्टी) के इस मजेदार डेमो के लिए आपको स्पीकर की आवश्यकता होगी। आलू को बात करने के लिए ध्वनि बटन पर क्लिक करें या 1-8 बटन दबाएँ... लेकिन सावधान रहें, यह समान रूप से मनोरंजक और कष्टप्रद हो सकता है।
क्रिस बोल्सन द्वारा बनाई गई एक एनिमेटेड गोलाकार गैलरी। चित्रों पर माउस ले जाएँ और उन्हें सजीव देखें। मुझे यह पसंद है कि शीर्षक फोटो मूवमेंट के साथ कैसे दिखता है। चिकना।
सोफिया वुड द्वारा एक और डेमो। उसने अनंत रूप से उत्पन्न होने वाले अंक उत्पन्न करने के लिए P5 का उपयोग किया। प्रत्येक चक्र में वे छोटे आकार के होंगे, जिससे एक अंतरिक्ष चित्र का पता चलेगा। हमेशा की तरह, कला और कोड का एक रचनात्मक संयोजन।
यह एक "बेवकूफ" एक्सेसिबिलिटी डेमो है: सभी सीएसएस रंग नामों और उनके रंग कंट्रास्ट संयोजन के साथ एक ग्रिड। डेव रूपर्ट ने परिणाम निर्धारित करने के लिए WCAG 2.1 विनिर्देश का उपयोग किया।
क्रिस कॉयियर ने इस प्रतिष्ठित चिह्न को दोहराया है, सभी पंक्तियों को उनके फ़ॉन्ट को गतिशील रूप से समायोजित करने के लिए स्क्रॉल-संचालित एनिमेशन लागू किया है (पाठ संपादन योग्य है) ताकि सभी पंक्तियां समान चौड़ाई पर कब्जा कर लें। क्योंकि यह एनीमेशन-रेंज प्रॉपर्टी का उपयोग करता है, यह डेमो केवल क्रोम पर काम करेगा।
पॉल नोबल स्क्रॉल-संचालित एनिमेशन को स्क्रॉल-स्नैप इवेंट के साथ मिलाकर एक शानदार कार्ड स्टैक बनाता है। अच्छे बदलावों का आनंद लेने के लिए आपको ट्रैकपैड का उपयोग करना होगा (यह डेमो माउस के साथ काम नहीं करेगा)।
एना ट्यूडर द्वारा एक और डेमो। कोड साफ़, संक्षिप्त और अर्थपूर्ण है। मुझे इस घटक का डिज़ाइन पसंद आया (Reddit प्रश्न से?) और मैं खुद को कुछ परियोजनाओं में कुछ इसी तरह का उपयोग करते हुए देख सकता हूँ।
यदि आपको यह सूची पसंद आई है, तो पिछले महीने के डेमो देखें!
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3