Frontend साक्षात्कार: आप CSS के साथ डिग्रेडेबल स्क्रॉल-संचालित एनिमेशन कैसे डिज़ाइन करेंगे?

1. प्रश्न और संदर्भ

एक कंटेंट पेज के शीर्ष पर एक रीडिंग प्रोग्रेस बार की आवश्यकता है, और कार्ड्स को स्क्रॉल कंटेनर में प्रवेश करते समय फ़ेड इन होना चाहिए। टीम ने पहले एक स्क्रॉल इवेंट लिसनर और requestAnimationFrame का उपयोग किया था, लेकिन कम क्षमता वाले (low-end) उपकरणों पर मुख्य थ्रेड में रुकावट (jank) दिखाई देती है। इसे CSS स्क्रॉल-संचालित एनिमेशन (Scroll-driven Animations) के साथ फिर से डिज़ाइन करें, स्क्रॉल प्रगति बनाम व्यू प्रगति की व्याख्या करें, और असमर्थित ब्राउज़र, रिड्यूस्ड मोशन और सत्यापन को कवर करें।

2. साक्षात्कारकर्ता क्या मूल्यांकन करता है

क्या आप समझते हैं कि CSS एनिमेशन डिफ़ॉल्ट समय-आधारित टाइमलाइन के बजाय स्क्रॉल टाइमलाइन या व्यू टाइमलाइन का अनुसरण कर सकते हैं।
क्या आप स्क्रोलर की स्थिति को ट्रैक करने वाले scroll() और अपने निकटतम स्क्रोलर के अंदर किसी तत्व की दृश्यता सीमा को ट्रैक करने वाले view() के बीच अंतर करते हैं।
क्या आप नमित टाइमलाइन, एनिमेशन रेंज, overflow की पूर्व-आवश्यकताओं और शॉर्टहैंड रीसेट क्रम को संभालते हैं।
क्या कम्पैटिबिलिटी, प्रदर्शन, कीबोर्ड रीडिंग, रिड्यूस्ड मोशन और एक नो-जावास्क्रिप्ट फ़ॉलबैक डिज़ाइन का हिस्सा हैं।

3. उत्तर देने से पहले स्पष्टीकरण के लिए प्रश्न

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

4. 30-सेकंड का उत्तर ढांचा

मैं रीडिंग बार को स्क्रोलर की स्क्रॉल प्रगति टाइमलाइन से बाइंड करूँगा और कार्ड्स को व्यू प्रगति टाइमलाइन से बाइंड करूँगा। scroll() स्क्रोलर के प्रारंभ से उसके अंत तक की प्रगति का प्रतिनिधित्व करता है; view() अपने निकटतम स्क्रोलर की दृश्य सीमा में किसी तत्व के प्रवेश और निकास का प्रतिनिधित्व करता है। कीफ़्रेम अभी भी विज़ुअल परिवर्तन को परिभाषित करते हैं, जबकि animation-timeline प्रगति की आपूर्ति करती है। कंटेनर में वास्तविक स्क्रॉल करने योग्य दूरी होनी चाहिए और एनिमेशन रेंज स्पष्ट होनी चाहिए। असमर्थित ब्राउज़र एक स्थिर प्रगति संकेत बनाए रखते हैं या थ्रॉटल किए गए, हल्के जावास्क्रिप्ट फ़ॉलबैक का उपयोग करते हैं; मुख्य सामग्री कभी भी मोशन पर निर्भर नहीं होती है। मैं supports जांच, reduced-motion व्यवहार, कीबोर्ड परीक्षण और लो-एंड डिवाइस माप जोड़ूँगा।

5. चरण-दर-चरण विस्तृत उत्तर

चरण 1: टाइमलाइन शब्दार्थ स्थापित करें

एक स्क्रॉल प्रगति टाइमलाइन स्क्रोलर की स्थिति द्वारा संचालित होती है, जो सामान्यतः शुरुआत में 0% से अंत में 100% तक चलती है। एक व्यू प्रगति टाइमलाइन अपने निकटतम स्क्रोलर के सापेक्ष लक्ष्य तत्व की दृश्य सीमा द्वारा संचालित होती है, जो व्यूपोर्ट में प्रवेश करने और बाहर निकलने वाले कार्ड्स के लिए उपयुक्त है। दोनों CSS एनिमेशन और Web Animations API टाइमलाइन मॉडल पर निर्मित हैं।

चरण 2: रीडिंग प्रोग्रेस बार लागू करें

लेख कंटेनर को वास्तव में ओवरफ्लो करने योग्य बनाएं, इसकी स्क्रॉल टाइमलाइन को नाम दें, और प्रोग्रेस तत्व के animation-timeline को उस नाम पर इंगित करें। बिना कीफ़्रेम के animation-timeline सेट न करें, और बिना स्क्रॉल रेंज वाले कंटेनर को उपयोग करने योग्य टाइमलाइन न मानें।

css

.article-scroller {
  overflow-y: auto;
  scroll-timeline-name: --article-scroll;
  scroll-timeline-axis: block;
}

.reading-progress {
  transform-origin: left center;
  animation: grow-progress linear;
  animation-timeline: --article-scroll;
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

चरण 3: कार्ड्स के लिए एक व्यू टाइमलाइन लागू करें

एक कार्ड एक अनाम view() टाइमलाइन का उपयोग कर सकता है जो निकटतम पूर्वज स्क्रोलर में दृश्यता को ट्रैक करती है। सख्त नियंत्रण के लिए, इसे view-timeline-name के साथ नाम दें और view-timeline-inset के साथ प्रारंभ और अंत सीमाओं को समायोजित करें। रेंज को इच्छित दृश्य क्षेत्र से मेल खाना चाहिए ताकि कार्ड किसी किनारे को छूते ही अपना पूरा एनिमेशन समाप्त न कर दे।

css

.card {
  animation: reveal-card linear both;
  animation-timeline: view(block 15% 15%);
}

@keyframes reveal-card {
  entry 0% { opacity: 0; transform: translateY(1rem); }
  cover 45% { opacity: 1; transform: translateY(0); }
  exit 100% { opacity: 0.6; }
}

चरण 4: रेंज और शॉर्टहैंड जाल को संभालें

नमित और अनाम टाइमलाइनों के लिए सही स्क्रोलर संबंध की आवश्यकता होती है; overflow, अक्ष या तत्व पदानुक्रम में बेमेल टाइमलाइन को बिना किसी प्रगति के छोड़ सकता है। animation शॉर्टहैंड के बाद animation-timeline घोषित करें क्योंकि शॉर्टहैंड छोड़े गए टाइमलाइन घटकों को उनके डिफ़ॉल्ट पर रीसेट कर देता है। स्पष्ट entry, cover और exit चरणों के लिए animation-range या रेंज कीफ़्रेम का उपयोग करें, फिर लक्षित ब्राउज़रों में परीक्षण करें।

चरण 5: फ़ॉलबैक और एक्सेसिबिलिटी सत्यापन डिज़ाइन करें

animation-timeline का पता लगाने के लिए @supports का उपयोग करें। जब संवर्द्धन अनुपलब्ध हो, तो एक स्थिर प्रगति संकेत, सामान्य पढ़ने का क्रम और पठनीय कंट्रास्ट बनाए रखें। यदि एक डायनामिक फ़ॉलबैक आवश्यक है, तो स्क्रॉल कार्य को थ्रॉटल करें और बार-बार लेआउट से बचें। prefers-reduced-motion: reduce के तहत, प्रगति जानकारी और फ़ोकस क्रम को बनाए रखते हुए अनुवाद (translation) और निरंतर गति को हटा दें। कीबोर्ड स्क्रॉलिंग, स्क्रीन रीडर, तेज़ रिवर्स स्क्रॉलिंग, नेस्टेड स्क्रोलर और लो-एंड डिवाइस पर फ़्रेम समय का परीक्षण करें।

6. उच्च गुणवत्ता वाला नमूना उत्तर

मैं रीडिंग बार को आर्टिकल स्क्रोलर की स्क्रॉल प्रगति टाइमलाइन से और कार्ड्स को उनके निकटतम स्क्रोलर में व्यू प्रगति टाइमलाइन से बाइंड करूँगा। पहला 0% से 100% तक स्क्रॉल स्थिति का प्रतिनिधित्व करता है; दूसरा तत्व के दृश्य सीमा में प्रवेश करने, कवर करने और बाहर निकलने का प्रतिनिधित्व करता है। मैं वास्तविक ओवरफ्लो को सत्यापित करूँगा, फिर कीफ़्रेम और animation-timeline को ऐसे क्रम में परिभाषित करूँगा जो शॉर्टहैंड को टाइमलाइन रीसेट करने से रोकता है। @supports एक स्थिर फ़ॉलबैक प्रदान करेगा, जिसमें केवल आवश्यकता पड़ने पर थ्रॉटल किए गए जावास्क्रिप्ट का उपयोग किया जाएगा। Reduced-motion सामग्री, प्रगति और फ़ोकस को संरक्षित करते हुए अनुवाद और निरंतर प्रभावों को हटा देगा। मैं कीबोर्ड उपयोग, स्क्रीन रीडर, नेस्टेड स्क्रॉलिंग और लो-एंड फ़्रेम समय को सत्यापित करूँगा।

7. सामान्य गलतियाँ

scroll() और view() को एक ही प्रगति के रूप में मानना → कार्ड दृश्यता का पालन नहीं करते हैं → पहले स्क्रोलर स्थिति बनाम तत्व दृश्यता की व्याख्या करें।
ओवरफ्लो न होने वाले कंटेनर पर स्क्रॉल टाइमलाइन घोषित करना → कोई एनिमेशन प्रगति नहीं → सामग्री का आकार, overflow और अक्ष की जाँच करें।
animation शॉर्टहैंड को animation-timeline को अधिलेखित करने देना → डिफ़ॉल्ट टाइमलाइन पुनर्स्थापित हो जाती है → शॉर्टहैंड के बाद फिर से animation-timeline घोषित करें।
केवल आधुनिक ब्राउज़रों में सामग्री दिखाना → पुराने ब्राउज़र मुख्य व्यवहार खो देते हैं → एक स्थिर संकेत और सामान्य पढ़ने का क्रम बनाए रखें।
कम मोशन के लिए केवल opacity को शून्य पर सेट करना → फ़ीडबैक गायब हो जाता है → सिमेंटिक और दृश्य स्थिति को बनाए रखते हुए अनुवाद और निरंतर गति को हटा दें।

8. अनुवर्ती प्रश्न और उत्तर

अनुवर्ती 1: आप स्क्रॉल टाइमलाइन बनाम व्यू टाइमलाइन का उपयोग कब करते हैं?

संपूर्ण स्क्रॉलिंग क्षेत्र में प्रगति के लिए स्क्रॉल टाइमलाइन का उपयोग करें। किसी स्क्रोलर में प्रवेश करने, कवर करने और छोड़ने वाले तत्व के लिए व्यू टाइमलाइन का उपयोग करें। निर्णायक कारक प्रगति का स्रोत है, न कि यह कि जावास्क्रिप्ट मौजूद है या नहीं।

अनुवर्ती 2: animation-timeline घोषित होने पर भी कोई एनिमेशन क्यों नहीं हो सकता है?

सामान्य कारण वास्तविक स्क्रॉल रेंज की कमी, अक्ष बेमेल, पूर्वज संबंध के बाहर एक टाइमलाइन नाम, या बाद का animation शॉर्टहैंड जो टाइमलाइन को रीसेट करता है। उस क्रम में overflow, टाइमलाइन संबंधों और घोषणा क्रम की जाँच करें।

अनुवर्ती 3: आप पुराने ब्राउज़रों के लिए डिग्रेड कैसे करते हैं?

एक स्थिर प्रगति संकेत और पूर्ण सामग्री बनाए रखें। यदि डायनामिक प्रगति आवश्यक है, तो एक छोटे अपडेट के लिए थ्रॉटल किए गए स्क्रॉल लिसनर का उपयोग करें। फ़ॉलबैक को पढ़ने के क्रम, कीबोर्ड एक्सेस या फ़ोकस व्यवहार को नहीं बदलना चाहिए।

अनुवर्ती 4: आप रिड्यूस्ड मोशन का सम्मान कैसे करते हैं?

prefers-reduced-motion: reduce के तहत, अनुवाद (translation), स्केलिंग और लंबे समय तक चलने वाले मोशन को हटा दें। स्थिर या तात्कालिक प्रगति अपडेट, सामग्री क्रम और पठनीय फ़ीडबैक बनाए रखें, और सत्यापित करें कि तेज़ स्क्रॉलिंग जानकारी को छिपाती नहीं है।