स्क्रॉलीटेलिंग

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

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

स्क्रोल करके कहानी बताने का अनुभव देने के लिए, आपको दो तरह के एलिमेंट की ज़रूरत होती है: एक स्क्रोल की पोज़िशन को ट्रैक करने के लिए और दूसरा ऐनिमेशन के लिए.

सबसे पहले, उन एलिमेंट पर नाम वाला view-timeline तय करें जिन्हें आपको ट्रैक करना है. ये आपके ऐनिमेशन के लिए ड्राइवर के तौर पर काम करेंगे.

#tracked {
  section:nth-child(1){ view-timeline: --tl-1 block; }
  section:nth-child(2){ view-timeline: --tl-2 block; }
  section:nth-child(3){ view-timeline: --tl-3 block; }
  section:nth-child(4){ view-timeline: --tl-4 block; }
  section:nth-child(5){ view-timeline: --tl-5 block; }
}

इसके बाद, उन एलिमेंट पर ऐनिमेशन लागू करें जिन्हें ऐनिमेट करना है. साथ ही, उन्हें animation-timeline प्रॉपर्टी का इस्तेमाल करके बनाई गई टाइमलाइन से लिंक करें.

#animated {
  section {
    animation: animate-in auto linear both, animate-out auto linear forwards;
    animation-range: entry 25% cover 50%, exit 50% exit 75%;
  }

  section:nth-child(1){ animation-timeline: --tl-1; }
  section:nth-child(2){ animation-timeline: --tl-2; }
  section:nth-child(3){ animation-timeline: --tl-3; }
  section:nth-child(4){ animation-timeline: --tl-4; }
  section:nth-child(5){ animation-timeline: --tl-5; }
}

animation-timeline के लिए, नाम वाली टाइमलाइन को रेफ़रंस के तौर पर इस्तेमाल करने के लिए, उन्हें एक ही स्कोप में होना चाहिए. किसी कॉमन ऐंसेस्टर पर timeline-scope प्रॉपर्टी का इस्तेमाल किया जा सकता है, ताकि टाइमलाइन उन सभी एलिमेंट के लिए उपलब्ध हो सकें जिन्हें उनकी ज़रूरत है. इसके लिए, :root एलिमेंट अक्सर एक अच्छा विकल्प होता है.

html {
  timeline-scope: --tl-1, --tl-2, --tl-3, --tl-4, --tl-5;
}

आखिर में, animation-range प्रॉपर्टी का इस्तेमाल करके, टाइमलाइन की सटीक रेंज तय की जा सकती है. इस रेंज के दौरान ऐनिमेशन चलना चाहिए. इससे आपको यह तय करने का बेहतर कंट्रोल मिलता है कि ऐनिमेशन कब ट्रिगर हों और वे कैसे आगे बढ़ें.

#animated section {
  animation-range: entry 25% cover 50%, exit 50% exit 75%;
}

कोड का उदाहरण

html {
  timeline-scope: --tl-1, --tl-2, --tl-3, --tl-4, --tl-5;
}

#tracked {
  section:nth-child(1){ view-timeline: --tl-1 block; }
  section:nth-child(2){ view-timeline: --tl-2 block; }
  section:nth-child(3){ view-timeline: --tl-3 block; }
  section:nth-child(4){ view-timeline: --tl-4 block; }
  section:nth-child(5){ view-timeline: --tl-5 block; }
}

@keyframes animate-in {
  from { scale: 0.5; opacity: 0; transform: rotateY(-180deg); }
  to { transform: rotateY(0deg); }
}
@keyframes animate-out {
  to { translate: 100% 0; opacity: 0; }
}

#animated {
  section {
    animation: animate-in auto linear both, animate-out auto linear forwards;
    animation-range: entry 25% cover 50%, exit 50% exit 75%;
    backface-visibility: hidden;
  }

  section:nth-child(1){ animation-timeline: --tl-1; }
  section:nth-child(2){ animation-timeline: --tl-2; }
  section:nth-child(3){ animation-timeline: --tl-3; }
  section:nth-child(4){ animation-timeline: --tl-4; }
  section:nth-child(5){ animation-timeline: --tl-5; }
}

/* MANDATORY Copy-Paste Safety: Disable continuous storytelling motion for sensitive users */
@media (prefers-reduced-motion: reduce) {
  #animated section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

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

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

• ज़रूर शामिल करें: सभी ब्राउज़र, स्क्रोल-ड्रिवन ऐनिमेशन के साथ काम नहीं करते. @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 को इसके बाद डिक्लेयर करें. इससे शॉर्टहैंड को टाइमलाइन रीसेट करने से रोका जा सकेगा.

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

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

फ़ॉलबैक रणनीतियां

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

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

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

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

const animatedSections = document.querySelectorAll('#animated section');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const sectionIndex = Array.from(document.querySelectorAll('#tracked section')).indexOf(entry.target);
    if (sectionIndex !== -1) {
      const animatedSection = animatedSections[sectionIndex];
      const ratio = entry.intersectionRatio;

      // Animate-in
      animatedSection.style.opacity = ratio;
      animatedSection.style.transform = `scale(${0.5 + ratio * 0.5}) rotateY(${-180 + ratio * 180}deg)`;

      // Animate-out
      if (ratio < 0.5) {
        animatedSection.style.translate = `${(0.5 - ratio) * 2 * 100}% 0`;
      } else {
        animatedSection.style.translate = '0 0';
      }
    }
  });
}, { threshold: Array.from({length: 101}, (_, i) => i / 100) });

document.querySelectorAll('#tracked section').forEach(section => {
  observer.observe(section);
});

और साथ में सीएसएस:

#animated section {
  opacity: 0;
  transform: scale(0.5)  rotateY(-180deg);
  backface-visibility: hidden;
}

/* MANDATORY Copy-Paste Safety: Ensure content remains fully visible and legible for assistive technologies or users with motion sensitivities */
@media (prefers-reduced-motion: reduce) {
  #animated section {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
  }
}

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