स्क्रोलपोर्ट में एलिमेंट के दिखने या न दिखने पर, एंट्री और एग्ज़िट इफ़ेक्ट जोड़ना

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

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

किसी एलिमेंट में एंट्री और एग्ज़िट इफ़ेक्ट जोड़ने के लिए, आपको कुछ सीएसएस प्रॉपर्टी को जोड़ना होगा. यहां सिलसिलेवार निर्देश दिए गए हैं:

1. एंट्री और एग्ज़िट ऐनिमेशन के लिए अलग-अलग @keyframes बनाएं. एंट्री ऐनिमेशन तब लागू होगा, जब एलिमेंट व्यूपोर्ट में दिखेगा. वहीं, एग्ज़िट ऐनिमेशन तब लागू होगा, जब एलिमेंट व्यूपोर्ट से हटेगा.

   @keyframes slide-in {
     from { transform: translateX(-100%); }
   }
   @keyframes slide-out {
     to { transform: translateX(100%); }
   }
   

2. एलिमेंट में एंट्री और एग्ज़िट कीफ़्रेम अटैच करें. ऐसा करने के लिए, animation प्रॉपर्टी में एक से ज़्यादा ऐनिमेशन तय करें.

   • एंट्री ऐनिमेशन को backwards का animation-fill-mode दें, ताकि ऐनिमेशन शुरू होने से पहले, यह अपनी शुरुआती स्थिति लागू कर सके.
   • एग्ज़िट ऐनिमेशन को animation-fill-mode की forwards वैल्यू दें, ताकि ऐनिमेशन पूरा होने के बाद वह अपनी आखिरी स्थिति में बना रहे.

   .animated-element {
     animation:
       slide-in 1s linear backwards,
       slide-out 1s linear forwards;
   }
   

3. एक व्यू टाइमलाइन बनाएं और उसे ऐनिमेशन से लिंक करें. व्यू टाइमलाइन, एक तरह की टाइमलाइन होती है. यह व्यूपोर्ट में किसी एलिमेंट की विज़िबिलिटी से जुड़ी होती है. view() फ़ंक्शन का इस्तेमाल करके, एक कस्टम टाइमिंग फ़ंक्शन बनाया जा सकता है. इसके बाद, animation-timeline प्रॉपर्टी का इस्तेमाल करके, इसे अपने ऐनिमेशन पर लागू किया जा सकता है.

   .animated-element {
     animation-timeline: view();
   }
   

   डिफ़ॉल्ट रूप से, view() एलिमेंट को block ऐक्सिस पर ट्रैक करता है. अगर आपको inline ऐक्सिस पर इसे ट्रैक करना है, तो view(inline) का इस्तेमाल करें.

4. ऐनिमेशन को entry और exit रेंज तक सीमित करें. animation-range प्रॉपर्टी की मदद से, यह तय किया जा सकता है कि टाइमलाइन के किस हिस्से पर ऐनिमेशन चलना चाहिए.

   • entry रेंज में, एलिमेंट के पहली बार व्यूपोर्ट में दिखने से लेकर उसके पूरी तरह से दिखने तक का समय शामिल होता है.
   • exit रेंज में, एलिमेंट के व्यूपोर्ट से बाहर निकलने से लेकर उसके पूरी तरह से छिपने तक का समय शामिल होता है.

   .animated-element {
     animation-range: entry, exit;
   }
   

कोड का उदाहरण

यह कोड, anonymous view-timeline का इस्तेमाल करके, स्क्रोल करने पर स्क्रोलर के डायरेक्ट चाइल्ड को ऐनिमेट करता है:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: view(inline);
      animation-range: entry, exit;
    }
  }
}

जब एलिमेंट स्क्रोलपोर्ट में आते हैं, तो grow ऐनिमेशन चलता है. वहीं, जब वे स्क्रोलपोर्ट से बाहर जाते हैं, तो shrink ऐनिमेशन चलता है.

यहां दिए गए कोड का विज़ुअल आउटपुट एक जैसा है. हालांकि, यह नाम वाली व्यू-टाइमलाइन का इस्तेमाल करके, स्क्रोल करने पर स्क्रोलर के डायरेक्ट चाइल्ड को ऐनिमेट करता है:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      view-timeline: --tl inline;
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: --tl;
      animation-range: entry, exit;
    }
  }
}

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

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

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

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

• ज़रूरी नहीं ट्रैक करने के लिए ऐक्सिस के बारे में साफ़ तौर पर बताएं: डिफ़ॉल्ट block ऐक्सिस को टारगेट न करने पर (जैसे कि हॉरिज़ॉन्टल स्क्रोलर में), साफ़ तौर पर बताएं कि किस ऐक्सिस को view(block) या view(inline) के साथ ट्रैक करना है.
• जब ऐनिमेशन को ट्रैक किए गए सब्जेक्ट पर लागू नहीं किया जाता है, तो नाम वाली व्यू टाइमलाइन का इस्तेमाल करें.

स्क्रोल-ड्रिवन ऐनिमेशन बनाने के लिए, view-timeline प्रॉपर्टी का इस्तेमाल करते समय:

• नाम के लिए, सीएसएस <dashed-ident> का इस्तेमाल करें.
• ज़रूरी नहीं ट्रैक करने के लिए ऐक्सिस के बारे में साफ़ तौर पर बताएं: डिफ़ॉल्ट block ऐक्सिस को टारगेट न करने पर (जैसे, हॉरिज़ॉन्टल स्क्रोलर में), साफ़ तौर पर बताएं कि view-timeline-axis के साथ किस ऐक्सिस को ट्रैक करना है.
• ज़रूर करें: पक्का करें कि लुकअप का स्कोप काम करता हो. जब view-timeline का एलान करने वाला एलिमेंट, ऐनिमेशन वाले एलिमेंट का फ़्लैट ट्री ऐंसेस्टर न हो, तो शेयर किए गए ऐंसेस्टर पर timeline-scope का इस्तेमाल करके, view-timeline के नाम की विज़िबिलिटी को बढ़ाएं.

जब ट्रैक किए जा रहे सब्जेक्ट के कई एलिमेंट या चाइल्ड एलिमेंट को ऐनिमेट करना हो, तो नाम वाले view-timeline को प्राथमिकता दें.

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

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

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

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

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

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

<script>
  if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          // This matches the effect as defined in the CSS example above.
          // Customize this further if needed.
          entry.target.style.scale = 0.5 + entry.intersectionRatio * 0.5;
        }
      },
      {
        threshold: Array.from({ length: 101 }, (_, i) => i / 100),
      }
    );

    document.querySelectorAll('.scroller > *').forEach((el) => {
      observer.observe(el);
    });
  }
</script>