प्रॉम्प्ट और उपयोग के मामले
लक्ष्य प्रत्येक स्क्रॉल इवेंट पर जावास्क्रिप्ट हैंडलर चलाए बिना एनिमेशन की प्रगति को स्क्रॉलिंग से जोड़ना है। CSS स्क्रॉल-ड्रिवन एनिमेशन animation-timeline, scroll(), और view() के माध्यम से scroll-progress और view-progress टाइमलाइन प्रदान करते हैं। कार्यान्वयन के लिए अभी भी एक फ़ॉलबैक, रिड्यूस्ड-मोशन व्यवहार, कन्टेनमेंट निर्णय, और एक स्पष्ट ब्राउज़र-सपोर्ट नीति की आवश्यकता होती है।
साक्षात्कारकर्ता क्या मूल्यांकन करता है
- क्या आप स्क्रॉल कंटेनर की प्रगति और तत्व की दृश्यता (visibility) प्रगति में अंतर करते हैं।
- क्या आप
animation-timelineडिक्लेरेशन कोanimationशॉर्टहैंड के बाद रखते हैं। - क्या आप लेआउट ट्रिगर करने वाली प्रॉपर्टीज से पहले transform और opacity चुनते हैं।
- क्या आप फ़ीचर क्वेरी या गैर-एनिमेटेड बेसलाइन प्रदान करते हैं।
- क्या आप
prefers-reduced-motionका सम्मान करते हैं और बिना मोशन के पठनीय सामग्री बनाए रखते हैं। - क्या आप लंबे पृष्ठों, नेस्टेड स्क्रॉलर्स, स्टिकी तत्वों और मोबाइल प्रदर्शन को मापते हैं।
उत्तर देने से पहले स्पष्टीकरण
- क्या प्रगति पृष्ठ, नेस्टेड स्क्रॉल कंटेनर, या व्यूपोर्ट में प्रवेश करने वाले तत्व से जुड़ी है?
- क्या एनिमेशन को स्थिति (state) संप्रेषित करनी चाहिए, या यह सजावटी है?
- कौन से ब्राउज़र और एम्बेडेड वेबव्यू दायरे में हैं?
- रिड्यूस्ड मोशन वाले उपयोगकर्ताओं को क्या देखना चाहिए?
- क्या डिज़ाइन एक स्थिर (static) प्रोग्रेस बार या रिवील पर डिग्रेड हो सकता है?
- क्या कोई स्टिकी, ट्रांसफ़ॉर्म किए गए, या वर्चुअलाइज़्ड पूर्वज हैं जो कंटेनिंग ब्लॉक को बदलते हैं?
30-सेकंड का उत्तर ढांचा
“मैं पेज प्रोग्रेस के लिए एक scroll-progress टाइमलाइन और स्क्रॉलर में प्रवेश करने वाले कार्ड्स के लिए एक view-progress टाइमलाइन का उपयोग करूंगा। मैं एक स्थिर पठनीय बेसलाइन को परिभाषित करूंगा, फिर एनिमेशन शॉर्टहैंड के बाद घोषित animation-timeline के साथ एक फीचर क्वेरी के अंदर एन्हांस करूंगा। मैं transform या opacity को एनिमेट करूंगा, नेस्टेड स्क्रॉलर्स और स्टिकी तत्वों का परीक्षण करूंगा, और prefers-reduced-motion के तहत गैर-आवश्यक मोशन को अक्षम करूंगा। मैं शिपिंग से पहले सपोर्ट, फ्रेम लागत, कीबोर्ड एक्सेस, और सामग्री की समझ को सत्यापित करूंगा।”
चरण-दर-चरण गहन उत्तर
चरण 1: टाइमलाइन चुनें।
जब एनिमेशन किसी कंटेनर की स्क्रॉल रेंज से मैप होता है, तो scroll-progress टाइमलाइन का उपयोग करें। जब एनिमेशन स्क्रॉलपोर्ट के माध्यम से किसी तत्व की यात्रा से मैप होता है, तो view-progress टाइमलाइन का उपयोग करें।
चरण 2: एक बेसलाइन बनाएं।
पहले प्रोग्रेस इंडिकेटर और कार्ड्स को एक उपयोगी स्थिर स्थिति में रेंडर करें। एनिमेशन को अनदेखा करने वाले ब्राउज़र को भी सामग्री, क्रम, कंट्रास्ट, और नियंत्रण प्रदर्शित करने चाहिए।
चरण 3: CSS एन्हांसमेंट जोड़ें।
@supports (animation-timeline: scroll()) {
.progress {
animation: grow-progress linear both;
animation-timeline: scroll(root block);
}
.card {
animation: reveal linear both;
animation-timeline: view(block);
animation-range: entry 0% cover 35%;
}
}शॉर्टहैंड के बाद animation-timeline घोषित करें क्योंकि शॉर्टहैंड टाइमलाइन से संबंधित उप-प्रॉपर्टीज को रीसेट करता है। जब नेस्टेड स्क्रॉल कंटेनर निकटतम स्क्रॉलर को अस्पष्ट बना सकते हैं, तो टाइमलाइन को स्पष्ट रूप से नाम दें।
चरण 4: एनिमेटेड प्रॉपर्टीज को सस्ता रखें।
opacity और transform को प्राथमिकता दें। एक लंबी सूची में width, height, top, left, या बड़े शैडो को एनिमेट करने से बचें जब तक कि प्रोफाइलिंग लागत को स्वीकार्य साबित न करे। अनुमान के आधार पर हर कार्ड में will-change न जोड़ें।
चरण 5: रिड्यूस्ड मोशन को संभालें।
@media (prefers-reduced-motion: reduce) {
.progress,
.card {
animation: none;
transform: none;
opacity: 1;
}
}सामग्री और प्रगति का अर्थ बिना एनिमेशन के भी उपलब्ध रहना चाहिए। एक सूक्ष्म त्वरित स्थिति या स्थिर संकेतक केवल एक लंबे ट्रांज़िशन को छोटा करने की तुलना में अधिक सुरक्षित है।
चरण 6: ज्यामिति और समर्थन का परीक्षण करें।
रूट स्क्रॉलर, नेस्टेड क्षैतिज और ऊर्ध्वाधर स्क्रॉलर्स, स्टिकी तत्वों, गतिशील सामग्री, ज़ूम, कीबोर्ड नेविगेशन, और मोबाइल व्यूपोर्ट परिवर्तनों का परीक्षण करें। फ़ीचर डिटेक्शन को एन्हांसमेंट को नियंत्रित करना चाहिए, बेसलाइन को छिपाना नहीं चाहिए।
चरण 7: मापें और निरीक्षण करें।
शैली (style), लेआउट, पेंट, और कंपोजिटर कार्य की जांच के लिए DevTools प्रदर्शन ट्रेस का उपयोग करें। एक लंबी सूची और कम शक्ति वाले मोबाइल डिवाइस का परीक्षण करें, और उस सामग्री पर नज़र रखें जो टाइमलाइन के असमर्थित या बाधित होने पर अपठनीय हो जाती है।
उच्च-गुणवत्ता वाला नमूना उत्तर
“पेज प्रोग्रेस बार scroll(root block) का उपयोग करता है क्योंकि इसका मान रूट स्क्रॉल रेंज है। प्रत्येक कार्ड entry-to-cover रेंज के साथ view(block) का उपयोग करता है क्योंकि इसका प्रकटीकरण इसकी अपनी दृश्यता का पालन करना चाहिए। मैं पहले कार्ड्स को सामान्य रूप से रेंडर करता हूं, फिर @supports के अंदर टाइमलाइन जोड़ता हूं; घोषणा एनिमेशन शॉर्टहैंड के बाद आती है। मैं मोशन को transform और opacity तक सीमित करता हूं, रिड्यूस्ड-मोशन उपयोगकर्ताओं के लिए गैर-आवश्यक एनिमेशन हटाता हूं, और जब नेस्टिंग निकटतम कंटेनर को अस्पष्ट बनाती है तो स्क्रॉलर को नाम देता हूं। मैं कीबोर्ड एक्सेस, स्टिकी और गतिशील सामग्री, असमर्थित ब्राउज़रों, और प्रदर्शन ट्रेस के साथ एक लंबी मोबाइल सूची का परीक्षण करता हूं।”
सामान्य गलतियां
- प्रत्येक फ्रेम के लिए स्क्रॉल इवेंट का उपयोग करना → हैंडलर का काम स्क्रॉलिंग के साथ प्रतिस्पर्धा कर सकता है → जब संबंध घोषणात्मक हो तो CSS टाइमलाइन को प्राथमिकता दें।
scroll()औरview()को भ्रमित करना → एनिमेशन गलत क्षण में शुरू होता है → टाइमलाइन को कंटेनर प्रगति या तत्व दृश्यता पर मैप करें।- शॉर्टहैंड से पहले
animation-timelineलगाना → शॉर्टहैंड इसे रीसेट कर सकता है → टाइमलाइन को बाद में घोषित करें। - डिफ़ॉल्ट रूप से लेआउट प्रॉपर्टीज को एनिमेट करना → लंबे पृष्ठ महंगे कार्य को ट्रिगर कर सकते हैं → transform और opacity से शुरुआत करें, फिर प्रोफाइल करें।
- रिड्यूस्ड-मोशन हैंडलिंग के बिना मोशन शिप करना → उपयोगकर्ता प्राथमिकता पर नियंत्रण खो देते हैं → एक स्थिर स्थिति प्रदान करें।
- एनिमेशन समर्थन मिलने तक सामग्री छिपाना → असमर्थित ब्राउज़र जानकारी खो देते हैं → पहले बेसलाइन बनाएं।
- यह मान लेना कि निकटतम स्क्रॉलर सही है → नेस्टेड कंटेनर टाइमलाइन को बदलते हैं → इच्छित स्क्रॉलर को नाम दें या परीक्षण करें।
अनुवर्ती प्रश्न और उत्तर
अनुवर्ती 1: scroll() और view() में क्या अंतर है?
scroll() एक स्क्रॉल कंटेनर की प्रगति को ट्रैक करता है। view() उस कंटेनर के स्क्रॉलपोर्ट के माध्यम से किसी तत्व की दृश्यता की प्रगति को ट्रैक करता है।
अनुवर्ती 2: टाइमलाइन को शॉर्टहैंड के बाद क्यों होना चाहिए?
animation शॉर्टहैंड टाइमलाइन से संबंधित उप-प्रॉपर्टीज को रीसेट करता है, इसलिए पहले से मौजूद टाइमलाइन डिक्लेरेशन को हटाया जा सकता है।
अनुवर्ती 3: फ़ॉलबैक क्या है?
सामग्री को उसकी अंतिम पठनीय स्थिति में दृश्यमान रखें और एक स्थिर प्रोग्रेस इंडिकेटर या एक छोटे जावास्क्रिप्ट एन्हांसमेंट का उपयोग केवल तभी करें जब उत्पाद की आवश्यकता वास्तव में इसकी मांग करती हो।
अनुवर्ती 4: आप रिड्यूस्ड मोशन का समर्थन कैसे करते हैं?
गैर-आवश्यक एनिमेशन को अक्षम करें, ट्रांसफ़ॉर्म को हटाएं, और एक स्थिर शैली के साथ समान सामग्री और स्थिति का अर्थ बनाए रखें।
अनुवर्ती 5: क्या आप height को एनिमेट कर सकते हैं?
केवल प्रोफाइलिंग के बाद और स्पष्ट आवश्यकता होने पर। Transform और opacity आमतौर पर लेआउट कार्य से बचते हैं; height को एनिमेट करना सिबलिंग्स में लेआउट को अमान्य कर सकता है।
अनुवर्ती 6: नेस्टेड स्क्रॉलर में क्या होता है?
निकटतम लागू स्क्रॉल कंटेनर पृष्ठ से भिन्न हो सकता है। ज्यामिति का परीक्षण करें और इच्छित टाइमलाइन को नाम दें या सही स्क्रॉलर तर्क का उपयोग करें।
अनुवर्ती 7: आप इसे प्रोडक्शन में कैसे सत्यापित करते हैं?
सपोर्ट उपयोग, प्रतिनिधि उपकरणों पर प्रदर्शन ट्रेस, रिड्यूस्ड-मोशन व्यवहार, और एक्सेसिबिलिटी जांच रिकॉर्ड करें। स्थिर बेसलाइन बनाए रखें ताकि असमर्थित या बाधित टाइमलाइन अभी भी प्रयोग करने योग्य रहें।