स्क्रोल करने पर हेडर का छोटा होना

स्क्रोल करने पर हेडर का छोटा होना, एक सामान्य यूज़र इंटरफ़ेस (यूआई) पैटर्न है. इसमें पेज के सबसे ऊपर मौजूद हेडर एलिमेंट, उपयोगकर्ता के नीचे की ओर स्क्रोल करने पर आसानी से छोटे साइज़ में बदल जाता है. इस इफ़ेक्ट का इस्तेमाल अक्सर मुख्य कॉन्टेंट के लिए स्क्रीन के ज़्यादा से ज़्यादा हिस्से का इस्तेमाल करने के लिए किया जाता है. साथ ही, इससे ज़रूरी नेविगेशन या ब्रैंडिंग एलिमेंट को ऐक्सेस किया जा सकता है. सीएसएस स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, इस इफ़ेक्ट को डिक्लेरेटिव और परफ़ॉर्म करने के तरीके से हासिल किया जा सकता है. इसके लिए, ऐनिमेशन को दस्तावेज़ की स्क्रोल पोज़िशन से लिंक करना होगा.

इन्हें कैसे लागू करें

स्क्रोल करने पर छोटा होने वाला हेडर बनाने का तरीका यहां बताया गया है:

1. एक फ़िक्स्ड हेडर बनाएं: हेडर एलिमेंट से शुरुआत करें. यह एलिमेंट, पेज पर सबसे ऊपर मौजूद होता है और इसकी लंबाई पहले से तय होती है.

   <header>HEADER</header>
   

   header {
     position: fixed;
     height: 200px;
     top: 0;
     left: 0;
     right: 0;
   }
   

2. हेडर को छोटा करने वाला ऐनिमेशन तय करना: एक ऐसा सीएसएस ऐनिमेशन बनाएं जो हेडर की ऊंचाई को बदलता हो.

   @keyframes shrink {
     to {
       height: 50px;
     }
   }
   

3. ऐनिमेशन और स्क्रोल टाइमलाइन लागू करना: ऐनिमेशन को हेडर से अटैच करें और scroll() फ़ंक्शन का इस्तेमाल करके, इसे दस्तावेज़ की स्क्रोल पोज़िशन से लिंक करें.

   header {
     animation: shrink auto linear both;
     animation-timeline: scroll(block root);
   }
   

4. animation-range सेट करें: animation-range प्रॉपर्टी का इस्तेमाल करके, स्क्रोल करने की वह दूरी तय करें जिसके बाद ऐनिमेशन दिखना चाहिए. उदाहरण के लिए, स्क्रोल करने के पहले 150 पिक्सल पर हेडर को छोटा करने के लिए, animation-range: 0px 150px; का इस्तेमाल किया जा सकता है.

   header {
     animation-range: 0px 150px;
   }
   

सलाह: हेडर के बाद आने वाले कॉन्टेंट को हेडर से छिपने से रोकने के लिए, body (या मुख्य कॉन्टेंट कंटेनर) में padding-top जोड़ें. यह हेडर की शुरुआती ऊंचाई के बराबर होना चाहिए.

अहम जानकारी: यह पक्का करने के लिए कि पेज का कॉन्टेंट, छोटे होते हेडर के साथ सिंक होकर स्क्रोल हो, animation-range-end को शुरुआती और आखिरी साइज़ के बीच के अंतर पर सेट करें. इससे यह पक्का होता है कि हेडर के अपने फ़ाइनल साइज़ तक पहुंचने पर, ऐनिमेशन ठीक से पूरा हो जाए. इस डेमो में, हेडर 200px से छोटा होकर 50px हो जाता है. इसलिए, animation-range-end को 150px पर सेट किया गया है.

कोड का उदाहरण

@keyframes shrink {
  to {
    height: 50px;
  }
}

header {
  animation: shrink auto linear both;
  animation-timeline: scroll(block root);
  animation-range: 0px 150px;
}

सबसे सही तरीके

स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल करते समय, कुछ सबसे सही तरीकों को अपनाना ज़रूरी है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ताओं को बेहतर और सुलभ अनुभव मिले:

• ज़रूर शामिल करें: सभी ब्राउज़र, स्क्रोल-ड्रिवन ऐनिमेशन के साथ काम नहीं करते. @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) का इस्तेमाल करके देखें कि यह सुविधा काम करती है या नहीं. साथ ही, उन ब्राउज़र के लिए फ़ॉलबैक उपलब्ध कराएं जिन पर यह सुविधा काम नहीं करती.
  • यहां (animation-range: 0% 100%) की जांच ज़रूर शामिल की जानी चाहिए, ताकि उन ब्राउज़र को फ़िल्टर किया जा सके जो सिर्फ़ कुछ हद तक काम करते हैं.
  • फ़ॉलबैक रणनीति के लिए, scroll-timeline-polyfill पैकेज का इस्तेमाल न करें. ऐसा इसलिए, क्योंकि इसमें सभी सुविधाएं मौजूद नहीं हैं और इसमें कई समस्याएं हैं.
  • अगर ऐनिमेशन को सिर्फ़ सजावट के लिए इस्तेमाल किया जा रहा है, तो प्रोग्रेसिव एनहैंसमेंट का विकल्प चुनें और फ़ॉलबैक न दें.
• उपयोगकर्ता की प्राथमिकताओं का ध्यान रखें: कुछ उपयोगकर्ताओं को वेब पर कम मोशन पसंद होता है. इन उपयोगकर्ताओं के लिए, ऐनिमेशन बंद करने या कम करने के लिए, prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल करें.
• सिर्फ़ अच्छी परफ़ॉर्मेंस वाली सीएसएस प्रॉपर्टी को ऐनिमेट करने की कोशिश करें: सबसे आसान ऐनिमेशन के लिए, ऐसी प्रॉपर्टी को ऐनिमेट करें जिन्हें ब्राउज़र के कंपोज़िटर थ्रेड से मैनेज किया जा सकता है. जैसे, transform और opacity. width या height जैसी अन्य प्रॉपर्टी को ऐनिमेट करने से, परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं.
• DO डिक्लेरेशन के सही क्रम का इस्तेमाल करें: animation शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करते समय, animation-timeline और animation-range को इसके बाद डिक्लेयर करें. इससे शॉर्टहैंड को टाइमलाइन रीसेट करने से रोका जा सकेगा.

स्क्रोल-ड्रिवन ऐनिमेशन बनाने के लिए, scroll() फ़ंक्शन का इस्तेमाल करते समय:

• ज़रूरी नहीं स्क्रोलर के बारे में साफ़ तौर पर बताएं: अगर सबसे नज़दीकी स्क्रोलर को टारगेट नहीं किया जा रहा है, तो साफ़ तौर पर बताएं कि आपको scroll(root) या scroll(self) के साथ किस स्क्रोलर का इस्तेमाल करना है.
  • जब root, nearest या self काफ़ी न हों, तो नाम वाली scroll-timeline का इस्तेमाल करें.
• ज़रूरी नहीं ट्रैक करने के लिए ऐक्सिस के बारे में साफ़ तौर पर बताएं: डिफ़ॉल्ट block ऐक्सिस को टारगेट न करने पर (जैसे कि हॉरिज़ॉन्टल स्क्रोलर में), साफ़ तौर पर बताएं कि किस ऐक्सिस को scroll(block) या scroll(inline) के साथ ट्रैक करना है.

खास तौर पर, इस्तेमाल के इस उदाहरण के लिए:

• animation-range में प्रतिशत का इस्तेमाल करते समय, जिस एलिमेंट को ऐनिमेट किया जा रहा है वह position: static या position: relative नहीं होना चाहिए.
  • ऐसा इसलिए होता है, क्योंकि उन एलिमेंट को “इन-फ़्लो” माना जाता है. स्क्रोल करने पर उन एलिमेंट को छोटा करने से, स्क्रोल करने की कुल दूरी कम हो जाएगी. इससे, स्क्रोल में 10% जैसी वैल्यू पर असर पड़ेगा.

ब्राउज़र से जुड़ी सहायता और फ़ॉलबैक रणनीतियां

इसलिए, आम तौर पर फ़ॉलबैक रणनीति की ज़रूरत होती है.

स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा काम न करने वाले ब्राउज़र के लिए, फ़ॉलबैक का इस्तेमाल करके विज़ुअल इफ़ेक्ट फिर से बनाए जा सकते हैं. फ़ॉलबैक आम तौर पर, स्क्रोल लिसनर (ScrollTimeline इफ़ेक्ट के लिए) या IntersectionObserver API (ViewTimeline इफ़ेक्ट के लिए) की मदद से बनाए जाते हैं.

जिन ब्राउज़र में स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा पहले से मौजूद होती है उनमें हमेशा नेटिव सीएसएस का इस्तेमाल करें. ऐसा इसलिए, क्योंकि वे ज़्यादा बेहतर तरीके से काम करते हैं.

ध्यान दें कि फ़ॉलबैक तरीके का इस्तेमाल करके, हर इफ़ेक्ट को फिर से नहीं बनाया जा सकता.

खास तौर पर इस इस्तेमाल के उदाहरण के लिए, यहां दी गई स्क्रिप्ट उन ब्राउज़र के लिए फ़ॉलबैक लागू करती है जो स्क्रोल-ड्रिवन ऐनिमेशन के साथ काम नहीं करते. यह 150px की दूरी पर दस्तावेज़ की स्क्रोल पोज़िशन को ट्रैक करने के लिए, स्क्रोल लिसनर का इस्तेमाल करता है. साथ ही, इसके हिसाब से हेडर की ऊंचाई को अपडेट करता है.

// Fallback for browsers that don't support scroll-driven animations
if (!CSS.supports('(animation-timeline: scroll()) and (animation-range: 0% 100%)')) {
  const header = document.querySelector('header');

  const initialHeight = 200;
  const finalHeight = 50;
  const scrollDistance = 150;

  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    const scrollPercent = Math.min(1, scrollY / scrollDistance);
    const newHeight = initialHeight - (initialHeight - finalHeight) * scrollPercent;

    header.style.height = `${newHeight}px`;
  });
}