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

स्क्रोल करने की टाइमलाइन और 'टाइमलाइन देखें' की सुविधा की मदद से, एलान वाले तरीके से स्क्रोल करके चलने वाले ऐनिमेशन बनाने का तरीका जानें.

Bramus

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

ब्राउज़र सहायता

  • 115
  • 115
  • x

सोर्स

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

दस्तावेज़ के ऊपर, पढ़ने का संकेत देने वाला इंडिकेटर, जो स्क्रोल करने पर दिखता है.

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

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

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

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

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

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

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

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

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

सीएसएस में ऐनिमेशन बनाने के लिए, @keyframes नियम का इस्तेमाल करके मुख्य-फ़्रेम का सेट बनाएं. ऐनिमेशन में लगने वाला समय तय करने के लिए, animation-duration सेट करते समय animation-name प्रॉपर्टी का इस्तेमाल करके, इसे किसी एलिमेंट से लिंक करें. यहां 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>, स्क्रोल प्रोग्रेस टाइमलाइन के जैसा ही है. इससे यह तय होता है कि किस ऐक्सिस को ट्रैक करना है. डिफ़ॉल्ट वैल्यू 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% पर सेट करने की कोशिश करें. इसके बाद, ऐनिमेशन का नतीजा देखने के लिए स्क्रोलबार को खींचें और छोड़ें.

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

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

'टाइमलाइन देखें' टूल का इस्तेमाल करते समय आपने ध्यान दिया होगा कि कुछ रेंज को दो अलग-अलग रेंज-नाम और रेंज-ऑफ़सेट के कॉम्बिनेशन से टारगेट किया जा सकता है. उदाहरण के लिए, 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 क्लास का एक नया इंस्टेंस बनाएं. 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-powered-animations.style mini-site पर बताया गया है. स्क्रोल करके चलने वाले ऐनिमेशन की मदद से, वेबसाइट में कई डेमो दिखाए गए हैं, ताकि यह हाइलाइट किया जा सके कि उनका इस्तेमाल करके क्या-क्या किया जा सकता है.

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

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

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

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

डेमो: स्टैकिंग कार्ड.

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

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

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