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

स्क्रोल से चलने वाले ऐनिमेशन बनाने के लिए, स्क्रोल टाइमलाइन और व्यू टाइमलाइन का इस्तेमाल करने का तरीका जानें.

Bramus

स्क्रोल करने पर दिखने वाले ऐनिमेशन

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 115.
  • Edge: 115.
  • Firefox: फ़्लैग के पीछे.
  • Safari: समर्थित नहीं.

सोर्स

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

दस्तावेज़ के ऊपर मौजूद, स्क्रोल से चलने वाला रीडिंग इंडिकेटर.

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

इस पेज पर मौजूद इमेज, दिखने के साथ-साथ धीरे-धीरे साफ़ होती हैं.

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

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

इससे, स्क्रोल करने पर सिंक होने वाले और बेहतर परफ़ॉर्म करने वाले ऐनिमेशन बनाना असंभव या बहुत मुश्किल हो जाता है.

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

ये नए कॉन्सेप्ट, मौजूदा Web Animations 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 Animations 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% के बीच होती है.

स्क्रोल की प्रोग्रेस टाइमलाइन का विज़ुअलाइज़ेशन. स्क्रोलर के सबसे नीचे तक स्क्रोल करने पर, प्रोग्रेस वैल्यू 0% से 100% तक बढ़ती है.

✨ इसे खुद आज़माएं

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

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

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

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

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

व्यू की प्रोग्रेस टाइमलाइन का विज़ुअलाइज़ेशन. सब्जेक्ट (हरे रंग का बॉक्स) स्क्रोलर पर स्क्रोल करने पर प्रोग्रेस की गिनती 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>, स्क्रोल प्रोग्रेस टाइमलाइन में मौजूद <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();
}

इंटरमज़ेज़ो: टाइमलाइन की सीमाएं देखना

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

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

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

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

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

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

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

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

animation-range: entry 0% entry 100%;

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

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

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

टाइमलाइन की रेंज को विज़ुअलाइज़ करने वाला टूल, जो https://goo.gle/view-timeline-range-tool पर उपलब्ध है

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

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

जब range-start और range-end, एक ही range-name को टारगेट करते हैं और पूरी रेंज में फैले होते हैं–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 क्लास का नया इंस्टेंस बनाएं. उस subject के साथ प्रॉपर्टी बैग पास करें जिसे आपको ट्रैक करना है, axis, और inset.

  • 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-driven-animations.style मिनी-साइट पर मौजूद हैं. वेबसाइट पर कई और डेमो शामिल हैं, ताकि यह हाइलाइट किया जा सके कि स्क्रोल-ड्रिवन ऐनिमेशन की मदद से क्या-क्या किया जा सकता है.

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

डेमो: कवर फ़्लो

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

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

डेमो: कार्ड को स्टैक करना.

✨ इसे खुद आज़माएं

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

स्क्रोल से चलने वाले ऐनिमेशन के बारे में, Google I/O '23 में वेब ऐनिमेशन में नया क्या है सेक्शन में भी बताया गया है.