स्क्रोल करके चलने वाले ऐनिमेशन की मदद से, स्क्रोल करने पर एलिमेंट को ऐनिमेट करें

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

Bramus

स्क्रोल किए जाने वाले ऐनिमेशन

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

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

इस तरह के असर को पाने का क्लासिक तरीका यह है कि मुख्य थ्रेड पर स्क्रोल इवेंट का जवाब दिया जाए. इसकी वजह से दो मुख्य समस्याएं आती हैं:

• आधुनिक ब्राउज़र एक अलग प्रोसेस पर स्क्रोल करते हैं और इसलिए एसिंक्रोनस रूप से स्क्रोल इवेंट डिलीवर करते हैं.
• मुख्य थ्रेड के ऐनिमेशन जैंक किए जा सकते हैं.

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

Chrome के वर्शन 115 में, एपीआई और कॉन्सेप्ट का एक नया सेट उपलब्ध कराया गया है. इसका इस्तेमाल, डिक्लेरेटिव स्क्रोल वाले ऐनिमेशन को चालू करने के लिए किया जा सकता है: टाइमलाइन स्क्रोल करें और टाइमलाइन देखें.

ये नए कॉन्सेप्ट, मौजूदा Web ऐनिमेशन API (WAAPI) और CSS Animations API के साथ इंटिग्रेट हो जाते हैं. इससे उन्हें इन मौजूदा एपीआई से मिलने वाले फ़ायदों को इनहेरिट करने में मदद मिलती है. इसमें, मुख्य थ्रेड पर स्क्रोल करके चलने वाले ऐनिमेशन बनाने की सुविधा शामिल है. हां, इसे सही तरीके से पढ़ें: अब आपको रेशमी स्मूद ऐनिमेशन का इस्तेमाल करने की सुविधा मिल सकती है. ऐनिमेशन, स्क्रोल करके चलाए जाते हैं और मुख्य थ्रेड के ज़रिए चलते हैं. इसके लिए, आपको कुछ लाइनों में अतिरिक्त कोड डालना होता है. कॉन्टेंट को पसंद न करें?!

वेब पर ऐनिमेशन, एक छोटा रीकैप

सीएसएस की मदद से वेब पर ऐनिमेशन

सीएसएस में ऐनिमेशन बनाने के लिए, @keyframes नियम का इस्तेमाल करके कीफ़्रेम का एक सेट तय करें. animation-name प्रॉपर्टी का इस्तेमाल करके, इसे किसी एलिमेंट से लिंक करें. साथ ही, animation-duration सेट करके यह तय करें कि ऐनिमेशन में कितना समय लगेगा. ज़्यादा animation-* लॉन्गहैंड प्रॉपर्टी उपलब्ध हैं–animation-easing-function और animation-fill-mode हैं. इनमें से कुछ प्रॉपर्टी के नाम animation शॉर्टहैंड में जोड़े जा सकते हैं.

उदाहरण के लिए, यहां एक ऐनिमेशन दिया गया है, जो X-ऐक्सिस पर एलिमेंट को स्केल करता है और उसके बैकग्राउंड का रंग भी बदलता है:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

वेब पर JavaScript के साथ ऐनिमेशन

JavaScript में, Web Streamings API का इस्तेमाल करके, वैसा ही काम किया जा सकता है. ऐसा करने के लिए, Animation और KeyFrameEffect के नए इंस्टेंस बनाएं या बहुत छोटा Element animate() तरीका इस्तेमाल करें.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

ऊपर दिए गए JavaScript स्निपेट का यह विज़ुअल नतीजा, सीएसएस के पिछले वर्शन के जैसा है.

ऐनिमेशन टाइमलाइन

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

स्क्रोल किए गए ऐनिमेशन की खास बातों से दो नई तरह की टाइमलाइन के बारे में पता चलता है, जिनका इस्तेमाल किया जा सकता है:

• स्क्रोल की प्रोग्रेस की टाइमलाइन: यह टाइमलाइन, किसी खास ऐक्सिस पर स्क्रोल कंटेनर के स्क्रोल करने की पोज़िशन से जुड़ी होती है.
• प्रोग्रेस टाइमलाइन देखें: एक टाइमलाइन, जो स्क्रोल कंटेनर में किसी खास एलिमेंट की रिलेटिव पोज़िशन से जुड़ी होती है.

स्क्रोल की प्रोग्रेस की टाइमलाइन

स्क्रोल की प्रोग्रेस की टाइमलाइन एक ऐनिमेशन टाइमलाइन होती है, जो स्क्रोल कंटेनर में स्क्रोल पोज़िशन में हुई प्रोग्रेस से जुड़ी होती है. इसे किसी खास ऐक्सिस के साथ-साथ स्क्रोलपोर्ट या स्क्रोलर भी कहा जाता है. यह स्क्रोल रेंज में किसी पोज़िशन को प्रोग्रेस के प्रतिशत में बदल देता है.

स्क्रोल करने की शुरुआती पोज़िशन 0% प्रोग्रेस दिखाती है और आखिरी स्क्रोल पोज़िशन 100% प्रोग्रेस दिखाती है. नीचे दिए गए विज़ुअलाइज़ेशन में, देखा जा सकता है कि स्क्रोलर को ऊपर से नीचे स्क्रोल करने पर प्रोग्रेस की गिनती 0% से 100% के बीच होती है.

✨ इसे खुद आज़माएं को दबाकर रखें

स्क्रोल की प्रोग्रेस की टाइमलाइन को अक्सर "स्क्रोल टाइमलाइन" कहा जाता है.

प्रोग्रेस की टाइमलाइन देखें

इस तरह की टाइमलाइन, स्क्रोल कंटेनर में किसी एलिमेंट की प्रोग्रेस से जुड़ी होती है. स्क्रोल प्रोग्रेस टाइमलाइन की तरह ही, स्क्रोलर के स्क्रोल ऑफ़सेट को ट्रैक किया जाता है. स्क्रोल की प्रोग्रेस टाइमलाइन से अलग, यह स्क्रोलर में किसी सब्जेक्ट की प्रोग्रेस को तय करता है.

यह IntersectionObserver के काम करने के तरीके से मिलता-जुलता है, जिससे यह ट्रैक किया जा सकता है कि स्क्रोलर में कोई एलिमेंट कितना दिख रहा है. अगर स्क्रोलर में एलिमेंट नहीं दिख रहा है, तो इसका मतलब है कि वह इंटरसेक्ट नहीं कर रहा है. अगर यह स्क्रोलर के अंदर दिख रहा है, तो इसका मतलब है कि यह सबसे छोटे हिस्से के लिए भी सही है.

व्यू की प्रोग्रेस की टाइमलाइन, उस समय से शुरू होती है जब कोई विषय स्क्रोलर से इंटरसेक्ट करना शुरू करता है और जब विषय स्क्रोलर का इंटरसेक्ट करना बंद कर देता है. नीचे दिए गए विज़ुअलाइज़ेशन में देखा जा सकता है कि विषय के स्क्रोल कंटेनर में जाने पर, प्रोग्रेस की गिनती 0% से शुरू होती है. साथ ही, विषय ने स्क्रोल कंटेनर से बाहर निकलते ही 100% की वैल्यू हासिल कर ली.

✨ इसे खुद आज़माएं को दबाकर रखें

देखे जाने की स्थिति की टाइमलाइन को अक्सर "टाइमलाइन देखें" के रूप में लिखा जाता है. किसी सब्जेक्ट के साइज़ के आधार पर, 'टाइमलाइन देखें' के खास हिस्सों को टारगेट किया जा सकता है. हालांकि, बाद में भी उन हिस्सों को टारगेट किया जा सकता है.

स्क्रोल करने की प्रोग्रेस की टाइमलाइन की मदद से व्यावहारिक तौर पर काम करना

सीएसएस में, स्क्रोल करने की प्रोग्रेस की बिना पहचान वाली टाइमलाइन बनाना

scroll() फ़ंक्शन का इस्तेमाल करके, सीएसएस में स्क्रोल की टाइमलाइन आसानी से बनाई जा सकती है. इससे, बिना पहचान ज़ाहिर किए, स्क्रोल करने वाली टाइमलाइन बन जाती है. इस टाइमलाइन को नई animation-timeline प्रॉपर्टी की वैल्यू के तौर पर सेट किया जा सकता है.

उदाहरण:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

scroll() फ़ंक्शन में एक <scroller> और <axis> तर्क स्वीकार किए जाते हैं.

<scroller> आर्ग्युमेंट के लिए, ये वैल्यू इस्तेमाल की जा सकती हैं:

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

<axis> आर्ग्युमेंट के लिए, ये वैल्यू इस्तेमाल की जा सकती हैं:

• block: स्क्रोल कंटेनर के ब्लॉक ऐक्सिस पर प्रोग्रेस के मेज़रमेंट का इस्तेमाल करता है (डिफ़ॉल्ट).
• inline: स्क्रोल कंटेनर के इनलाइन ऐक्सिस पर प्रोग्रेस को मेज़र करता है.
• y: स्क्रोल कंटेनर के y ऐक्सिस पर प्रोग्रेस को मेज़र करने के लिए इस्तेमाल किया जाता है.
• x: स्क्रोल कंटेनर के x ऐक्सिस पर प्रोग्रेस को मेज़र करने के लिए इस्तेमाल किया जाता है.

उदाहरण के लिए, किसी ऐनिमेशन को ब्लॉक ऐक्सिस पर रूट स्क्रोलर से बाइंड करने के लिए, scroll() को पास की जाने वाली वैल्यू root और block हैं. सभी को एक साथ रखें, तो इसकी वैल्यू scroll(root block) होती है.

डेमो: किताब पढ़ने की प्रोग्रेस दिखाने वाला इंडिकेटर

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

✨ इसे खुद आज़माएं को दबाकर रखें

पढ़ने की प्रोग्रेस दिखाने वाला इंडिकेटर, तय की गई पोज़िशन का इस्तेमाल करके, पेज के सबसे ऊपर मौजूद होता है. कंपोज़िट ऐनिमेशन का फ़ायदा लेने के लिए, width को ऐनिमेट नहीं किया जा रहा है. हालांकि, transform का इस्तेमाल करके एलिमेंट को x-ऐक्सिस पर छोटा किया जाता है.

<body>
  <div id="progress"></div>
  …
</body>

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

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

#progress एलिमेंट पर grow-progress ऐनिमेशन की टाइमलाइन, एक ऐसी अनजान टाइमलाइन पर सेट है जिसे scroll() का इस्तेमाल करके बनाया गया है. scroll() को कोई आर्ग्युमेंट नहीं दिया जाता है. इसलिए, इसकी डिफ़ॉल्ट वैल्यू लागू होती है.

ट्रैक करने के लिए डिफ़ॉल्ट स्क्रोलर nearest है और डिफ़ॉल्ट ऐक्सिस block है. यह रूट स्क्रोलर को असरदार तरीके से टारगेट करता है, क्योंकि यह #progress एलिमेंट का सबसे नज़दीकी स्क्रोलर होता है. साथ ही, यह रूट स्क्रोलर के ब्लॉक की दिशा को भी ट्रैक करता है.

सीएसएस में, स्क्रोल की प्रोग्रेस की टाइमलाइन का नाम बनाना

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

किसी एलिमेंट पर स्क्रोल प्रोग्रेस टाइमलाइन नाम बनाने के लिए, स्क्रोल कंटेनर पर मौजूद scroll-timeline-name सीएसएस प्रॉपर्टी को अपनी पसंद के आइडेंटिफ़ायर पर सेट करें. मान -- से शुरू होना चाहिए.

किस ऐक्सिस को ट्रैक करना है, यह बदलने के लिए scroll-timeline-axis प्रॉपर्टी का एलान करें. अनुमति वाली वैल्यू और scroll() के <axis> आर्ग्युमेंट, एक जैसे हैं.

आखिर में, ऐनिमेशन को स्क्रोल प्रोग्रेस टाइमलाइन से लिंक करने के लिए, एलिमेंट पर animation-timeline प्रॉपर्टी को उसी वैल्यू पर सेट करें जिसे ऐनिमेशन के रूप में scroll-timeline-name के लिए इस्तेमाल किए गए आइडेंटिफ़ायर की वैल्यू पर सेट करना है.

कोड का उदाहरण:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

अगर आप चाहें, तो scroll-timeline-name और scroll-timeline-axis को scroll-timeline शॉर्टहैंड में मिलाएं. उदाहरण के लिए:

scroll-timeline: --my-scroller inline;

डेमो: हॉरिज़ॉन्टल कैरसेल स्टेप इंडिकेटर

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

✨ इसे खुद आज़माएं को दबाकर रखें

किसी गैलरी के लिए बेस मार्कअप यह होता है:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

.gallery__progress एलिमेंट पूरी तरह से .gallery रैपर एलिमेंट में मौजूद होता है. इसका शुरुआती साइज़, --num-images कस्टम प्रॉपर्टी से तय होता है.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer, शामिल .gallery__entry एलिमेंट को हॉरिज़ॉन्टल तौर पर दिखाता है और यह स्क्रोल करने वाला एलिमेंट होता है. स्क्रोल करने की जगह को ट्रैक करके, .gallery__progress ऐनिमेशन के साथ दिखती है. ऐसा करने के लिए, स्क्रोल की प्रोग्रेस की टाइमलाइन --gallery__scrollcontainer देखें.

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

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

JavaScript की मदद से, स्क्रोल की प्रोग्रेस की टाइमलाइन बनाना

JavaScript में स्क्रोल टाइमलाइन बनाने के लिए, ScrollTimeline क्लास का नया इंस्टेंस बनाएं. source और axis के साथ एक प्रॉपर्टी बैग में पास करें, जिसे आपको ट्रैक करना है.

• source: उस एलिमेंट का रेफ़रंस जिसके स्क्रोलर को आपको ट्रैक करना है. रूट स्क्रोलर को टारगेट करने के लिए document.documentElement का इस्तेमाल करें.
• axis: तय करता है कि किस ऐक्सिस को ट्रैक करना है. सीएसएस वैरिएंट की तरह ही block, inline, x, और y वैल्यू इस्तेमाल की जा सकती हैं.

const tl = new ScrollTimeline({
  source: document.documentElement,
});

इसे किसी वेब ऐनिमेशन में अटैच करने के लिए, इसे timeline प्रॉपर्टी के तौर पर पास करें और अगर कोई duration है, तो उसे हटा दें.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

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

उसी मार्कअप का इस्तेमाल करते समय, JavaScript की मदद से पढ़ने की स्थिति दिखाने वाले इंडिकेटर को फिर से बनाने के लिए, नीचे दिए गए JavaScript कोड का इस्तेमाल करें:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

सीएसएस वर्शन के लिए विज़ुअल नतीजा इसके जैसा ही है: बनाया गया timeline, रूट स्क्रोलर को ट्रैक करता है और पेज को स्क्रोल करने पर x-ऐक्सिस पर #progress को 0% से 100% तक स्केल करता है.

✨ इसे खुद आज़माएं को दबाकर रखें

व्यू की प्रोग्रेस की टाइमलाइन की मदद से व्यावहारिक जानकारी हासिल करना

सीएसएस में, पहचान छिपाकर व्यू की प्रोग्रेस की टाइमलाइन बनाना

इवेंट की प्रोग्रेस की टाइमलाइन बनाने के लिए, view() फ़ंक्शन का इस्तेमाल करें. इसके स्वीकार किए गए तर्क <axis> और <view-timeline-inset> हैं.

• <axis>, स्क्रोल प्रोग्रेस टाइमलाइन के जैसा ही है और इससे तय होता है कि किस ऐक्सिस को ट्रैक करना है. डिफ़ॉल्ट वैल्यू block है.
• <view-timeline-inset> के साथ, जब कोई एलिमेंट व्यू में हो या नहीं, तब सीमाओं में बदलाव करने के लिए, ऑफ़सेट (पॉज़िटिव या नेगेटिव) तय किया जा सकता है. वैल्यू, प्रतिशत या auto होनी चाहिए. इसमें auto, डिफ़ॉल्ट वैल्यू है.

उदाहरण के लिए, ब्लॉक ऐक्सिस पर स्क्रोलर से इंटरसेक्ट करने वाले एलिमेंट से ऐनिमेशन बाइंड करने के लिए, view(block) का इस्तेमाल करें. scroll() की तरह ही, इसे animation-timeline प्रॉपर्टी की वैल्यू के तौर पर सेट करें और animation-duration को auto पर सेट करना न भूलें.

इस कोड का इस्तेमाल करके, स्क्रोल करते समय हर img फ़ेड-इन हो जाएगा, क्योंकि यह व्यूपोर्ट को पार करता है.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: टाइमलाइन की रेंज देखें

डिफ़ॉल्ट रूप से, 'टाइमलाइन देखें' से लिंक किया गया ऐनिमेशन, टाइमलाइन की पूरी रेंज में जुड़ जाता है. यह उस समय से शुरू होता है, जब विषय स्क्रोलपोर्ट में जाने वाला होता है और जब विषय स्क्रोलपोर्ट से पूरी तरह से निकल जाता है, तो यह खत्म हो जाता है.

टाइमलाइन में मौजूद डेटा की रेंज तय करके, इसे व्यू टाइमलाइन के किसी खास हिस्से से लिंक किया जा सकता है. उदाहरण के लिए, ऐसा सिर्फ़ तब हो सकता है, जब विषय स्क्रोलर में जा रहा हो. नीचे दिए गए विज़ुअलाइज़ेशन में, विषय के स्क्रोल कंटेनर में जाने पर प्रोग्रेस 0% से ऊपर की गिनती शुरू होती है, लेकिन पूरी तरह से इंटरसेक्ट करते ही 100% तक पहुंच जाती है.

'टाइमलाइन' की जिन सीमाओं को टारगेट किया जा सकता है वे यहां दी गई हैं:

• cover: व्यू की प्रोग्रेस की टाइमलाइन की पूरी रेंज दिखाता है.
• entry: उस रेंज के बारे में बताता है जिसके दौरान मुख्य बॉक्स, व्यू की प्रोग्रेस दिखाने की सीमा में चला रहा है.
• exit: उस रेंज को दिखाता है जिसके दौरान मुख्य बॉक्स, व्यू की प्रोग्रेस दिखाने वाली रेंज से बाहर निकल जाता है.
• entry-crossing: उस रेंज को दिखाता है जिसमें मुख्य बॉक्स आखिरी बॉर्डर के किनारे को पार करता है.
• exit-crossing: उस रेंज को दिखाता है जिसमें मुख्य बॉक्स, शुरुआती बॉर्डर के किनारे को पार करता है.
• contain: उस रेंज को दिखाता है जिसमें मुख्य बॉक्स, स्क्रोलपोर्ट में मौजूद व्यू की प्रोग्रेस दिखाने की सीमा के दौरान दिखता है या पूरी तरह कवर होता है. यह इस बात पर निर्भर करता है कि सब्जेक्ट कितना लंबा है या स्क्रोलर से छोटा है या नहीं.

रेंज तय करने के लिए, आपको रेंज शुरू और खत्म करने की रेंज सेट करनी होगी. हर विकल्प में, रेंज का नाम (ऊपर दी गई सूची देखें) और उस रेंज के नाम में जगह की जानकारी तय करने के लिए, रेंज-ऑफ़सेट शामिल होता है. आम तौर पर, रेंज-ऑफ़सेट 0% से 100% के बीच होता है. हालांकि, आपके पास 20em जैसी कोई तय लंबाई तय करने का विकल्प भी होता है.

उदाहरण के लिए, अगर आपको किसी विषय के अंदर आने के तुरंत बाद ऐनिमेशन चलाना है, तो रेंज की शुरुआत के तौर पर entry 0% को चुनें. विषय के दर्ज होने तक इसे पूरा करने के लिए, रेंज-एंड के मान के रूप में entry 100% को चुनें.

सीएसएस में, इसे animation-range प्रॉपर्टी का इस्तेमाल करके सेट किया जाता है. उदाहरण:

animation-range: entry 0% entry 100%;

JavaScript में, rangeStart और rangeEnd प्रॉपर्टी का इस्तेमाल करें.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

नीचे एम्बेड किए गए टूल का इस्तेमाल करके देखें कि हर रेंज का नाम क्या बताता है. साथ ही, यह भी देखें कि प्रतिशत, शुरू और खत्म होने की पोज़िशन पर क्या असर डालते हैं. रेंज-शुरू की रेंज entry 0% और रेंज-एंड को cover 50% पर सेट करने की कोशिश करें. इसके बाद, ऐनिमेशन का नतीजा देखने के लिए, स्क्रोलबार को खींचें और छोड़ें.

रिकॉर्डिंग देखना

आपने देखा होगा कि टाइमलाइन की रेंज वाले इस टूल को इस्तेमाल करते समय, कुछ रेंज दो अलग-अलग रेंज-नाम और रेंज-ऑफ़सेट के दो अलग-अलग कॉम्बिनेशन के आधार पर टारगेट की जा सकती हैं. उदाहरण के लिए, entry 0%, entry-crossing 0%, और cover 0% सभी एक ही इलाके को टारगेट करते हैं.

जब रेंज-स्टार्ट और रेंज-एंड, एक ही रेंज-नाम को टारगेट करते हैं और पूरी रेंज–0% से लेकर 100% तक–आप हैं, तो वैल्यू को छोटा करके सिर्फ़ रेंज के नाम का इस्तेमाल किया जा सकता है. उदाहरण के लिए, animation-range: entry 0% entry 100%; को बहुत छोटे animation-range: entry में फिर से लिखा जा सकता है.

डेमो: इमेज दिखाना

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

✨ इसे खुद आज़माएं को दबाकर रखें

बढ़ते हुए इफ़ेक्ट को बढ़ाने के लिए, ऐनिमेशन वाले क्लिप पाथ का इस्तेमाल किया जाता है. इस इफ़ेक्ट के लिए इस सीएसएस का इस्तेमाल किया जाता है:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

सीएसएस में, 'व्यू की प्रोग्रेस की टाइमलाइन' नाम से बनाई जा रही है

स्क्रोल टाइमलाइन के नाम वाले वर्शन की तरह ही, 'टाइमलाइन देखें' नाम भी दिया जा सकता है. scroll-timeline-* प्रॉपर्टी के बजाय, ऐसे वैरिएंट इस्तेमाल किए जाते हैं जिनमें view-timeline- प्रीफ़िक्स होता है. जैसे, view-timeline-name और view-timeline-axis.

इसमें एक तरह की वैल्यू लागू होती हैं. साथ ही, नाम वाली टाइमलाइन देखने के लिए भी यही नियम लागू होते हैं.

डेमो: इमेज को दिखाया गया, फिर से देखा गया

इमेज में किए गए पिछले डेमो पर फिर से काम किया जा रहा है. अपडेट किया गया कोड कुछ ऐसा दिखता है:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

view-timeline-name: revealing-image का इस्तेमाल करके, एलिमेंट को उसके सबसे नज़दीकी स्क्रोलर में ट्रैक किया जाएगा. इसके बाद, उस वैल्यू को animation-timeline प्रॉपर्टी की वैल्यू के तौर पर इस्तेमाल किया जाता है. विज़ुअल आउटपुट पहले जैसा ही है.

✨ इसे खुद आज़माएं को दबाकर रखें

JavaScript में व्यू की प्रोग्रेस की टाइमलाइन बनाना

JavaScript में 'टाइमलाइन देखें' बनाने के लिए, ViewTimeline क्लास का नया इंस्टेंस बनाएं. axis, और inset के साथ-साथ, उस प्रॉपर्टी बैग में subject पास करें जिसे आपको ट्रैक करना है.

• subject: उस एलिमेंट का रेफ़रंस जिसे आपको उसके स्क्रोलर में ट्रैक करना है.
• axis: ट्रैक किया जाने वाला ऐक्सिस. सीएसएस वैरिएंट की तरह ही block, inline, x, और y वैल्यू इस्तेमाल की जा सकती हैं.
• inset: बॉक्स व्यू में है या नहीं, यह तय करते समय स्क्रोलपोर्ट का इनसेट (पॉज़िटिव) या आउटसेट (नेगेटिव) अडजस्टमेंट.

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

इसे किसी वेब ऐनिमेशन में अटैच करने के लिए, इसे timeline प्रॉपर्टी के तौर पर पास करें और अगर कोई duration है, तो उसे हटा दें. विकल्प के तौर पर, rangeStart और rangeEnd प्रॉपर्टी का इस्तेमाल करके रेंज की जानकारी भेजें.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ इसे खुद आज़माएं को दबाकर रखें

आज़माने के लिए कुछ और चीज़ें

कीफ़्रेम के एक सेट की मदद से, 'टाइमलाइन देखें' की कई रेंज में अटैच करना

आइए, संपर्क सूची के इस डेमो पर नज़र डालते हैं. इसमें, सूची के नामों को ऐनिमेट किया गया है. सूची में जैसे ही नीचे से स्क्रोलपोर्ट में जाया जाता है, तब वह स्लाइड+फ़ेड हो जाता है और जैसे-जैसे सबसे ऊपर स्क्रोलपोर्ट से बाहर निकलता है, तब वह स्लाइड+फ़ेड हो जाता है.

✨ इसे खुद आज़माएं को दबाकर रखें

इस डेमो में, हर एलिमेंट को एक 'टाइमलाइन' से सजाया जाता है, जो एलिमेंट को स्क्रोलपोर्ट पर पार करते समय ट्रैक करती है. फिर भी, उसके साथ दो स्क्रोल-ड्रिवन ऐनिमेशन जुड़े हुए हैं. animate-in ऐनिमेशन, टाइमलाइन की entry रेंज से और animate-out ऐनिमेशन टाइमलाइन की exit रेंज से अटैच है.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

दो अलग-अलग रेंज से जुड़े दो अलग-अलग ऐनिमेशन चलाने के बजाय, मुख्य-फ़्रेम का एक ऐसा सेट बनाया जा सकता है जिसमें रेंज की जानकारी पहले से मौजूद हो.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

कीफ़्रेम में रेंज की जानकारी होती है, इसलिए आपको animation-range बताने की ज़रूरत नहीं होती. नतीजा पहले जैसा ही है.

✨ इसे खुद आज़माएं को दबाकर रखें

बिना अनुमति वाली स्क्रोल टाइमलाइन में अटैच किया जा रहा है

स्क्रोल टाइमलाइन और 'टाइमलाइन देखें' नाम को खोजने का तरीका, सिर्फ़ ऐन्सेस्टर को स्क्रोल करने तक सीमित है. हालांकि, अक्सर जिस एलिमेंट को ऐनिमेट करना होता है वह स्क्रोलर का चाइल्ड नहीं होता, जिसे ट्रैक करने की ज़रूरत होती है.

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

उदाहरण के लिए:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

इस स्निपेट में:

• .parent एलिमेंट, --tl नाम के साथ टाइमलाइन के बारे में बताता है. इसका कोई भी चाइल्ड, इसे animation-timeline प्रॉपर्टी के लिए वैल्यू के तौर पर ढूंढकर इस्तेमाल कर सकता है.
• .scroller एलिमेंट, स्क्रोल टाइमलाइन के बारे में जानकारी देता है. इसमें --tl नाम मौजूद है. डिफ़ॉल्ट रूप से, यह सिर्फ़ अपने चाइल्ड पब्लिशर को ही दिखेगी. हालांकि, .parent ने इसे scroll-timeline-root के तौर पर सेट किया है, इसलिए यह इससे अटैच हो जाता है.
• .subject एलिमेंट, --tl टाइमलाइन का इस्तेमाल करता है. यह अपने पूर्वज पेड़ पर जाता है और .parent पर --tl ढूंढता है. जब .parent पर --tl, .scroller के --tl को दिखाता है, तब .subject .scroller के स्क्रोल करने की प्रोग्रेस की टाइमलाइन को ट्रैक करेगा.

इसे अलग तरीके से देखें, तो टाइमलाइन को पूर्वज (यानी होइसिंग) तक ले जाने के लिए timeline-root का इस्तेमाल किया जा सकता है, ताकि पूर्वज के सभी बच्चे उसे ऐक्सेस कर सकें.

timeline-scope प्रॉपर्टी का इस्तेमाल, स्क्रोल की जाने वाली टाइमलाइन और 'टाइमलाइन देखें', दोनों के साथ किया जा सकता है.

ज़्यादा डेमो और संसाधन

इस लेख में दिए गए सभी डेमो, scroll-ड्राइव-animations.style mini-site पर लागू किए गए हैं. वेबसाइट में और भी कई डेमो दिए गए हैं, ताकि यह जानकारी दी जा सके कि स्क्रोल करके दिए जाने वाले ऐनिमेशन की मदद से क्या-क्या किया जा सकता है.

एल्बम कवर की यह सूची, अतिरिक्त डेमो में से एक है. हर कवर 3D में घूमता है, क्योंकि यह सेंटर स्पॉटलाइट में ले जाता है.

✨ इसे खुद आज़माएं को दबाकर रखें

इसके अलावा, इस स्टैकिंग कार्ड का डेमो भी दिखाया जा सकता है, जिससे position: sticky का फ़ायदा लिया जा सकता है. जैसे-जैसे कार्ड स्टैक होते हैं, पहले से अटके हुए कार्ड स्केल डाउन हो जाते हैं, जिससे अच्छा डेप्थ इफ़ेक्ट बनता है. आखिर में, पूरा स्टैक एक ग्रुप के तौर पर व्यू से बाहर स्लाइड होता है.

इसके अलावा, scroll-scroll-animations.style टूल का कलेक्शन मौजूद होता है. जैसे, 'टाइमलाइन की रेंज का प्रोग्रेस' विज़ुअलाइज़ेशन को इकट्ठा किया गया है. इस कलेक्शन को इस पोस्ट में पहले शामिल किया गया था.

Google I/O 2023 में वेब ऐनिमेशन में नया क्या है में, स्क्रोल करके दिए गए ऐनिमेशन की जानकारी भी दी गई है.