सीएसएस में स्क्रोल पर आधारित ऐनिमेशन का इस्तेमाल शुरू करना

1. शुरू करने से पहले

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

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

इस कोडलैब में, सीएसएस का इस्तेमाल करके स्क्रोल-ड्रिवन ऐनिमेशन बनाने का तरीका बताया गया है. इस कोडलैब को पूरा करने के बाद, आपको इस शानदार सुविधा के साथ लॉन्च की गई कई नई सीएसएस प्रॉपर्टी के बारे में पता चल जाएगा. जैसे, scroll-timeline, view-timeline, animation-timeline, और animation-range.

आपको क्या सीखने को मिलेगा

सीएसएस में स्क्रोल टाइमलाइन की मदद से, पैरलैक्स बैकग्राउंड इफ़ेक्ट बनाने का तरीका.
सीएसएस में स्क्रोल टाइमलाइन की मदद से प्रोग्रेस बार बनाने का तरीका.
सीएसएस में व्यू टाइमलाइन की मदद से, इमेज को धीरे-धीरे दिखाने वाला इफ़ेक्ट बनाने का तरीका.
सीएसएस में, व्यू टाइमलाइन की अलग-अलग रेंज को टारगेट करने का तरीका.

आपको किन चीज़ों की ज़रूरत होगी

डिवाइसों के इनमें से किसी एक कॉम्बिनेशन का इस्तेमाल किया जा सकता है:

ChromeOS, macOS या Windows पर Chrome का नया वर्शन (115 या इसके बाद का वर्शन). साथ ही, "Experimental Web Platform Features" फ़्लैग चालू होना चाहिए.
एचटीएमएल की बुनियादी जानकारी
सीएसएस की बुनियादी जानकारी, खास तौर पर सीएसएस में ऐनिमेशन की जानकारी

2. सेट अप करें

इस प्रोजेक्ट के लिए ज़रूरी सभी चीज़ें, GitHub रिपॉज़िटरी में उपलब्ध हैं. शुरू करने के लिए, कोड को क्लोन करें और इसे अपने पसंदीदा डेवलपमेंट एनवायरमेंट में खोलें.

एक नया ब्राउज़र टैब खोलें और https://github.com/googlechromelabs/io23-scroll-driven-animations-codelab पर जाएं.
डेटा स्टोर करने की जगह को क्लोन करें.
कोड को अपने पसंदीदा IDE में खोलें.
डिपेंडेंसी इंस्टॉल करने के लिए, npm install चलाएं.
npm start चलाएं और http://localhost:3000/ पर जाएं.
इसके अलावा, अगर आपने npm इंस्टॉल नहीं किया है, तो Chrome में src/index.html फ़ाइल खोलें.

3. ऐनिमेशन की टाइमलाइन के बारे में जानकारी

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

स्क्रोल-ड्राइव ऐनिमेशन की मदद से, आपको दो नई तरह की टाइमलाइन का ऐक्सेस मिलता है:

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

सीएसएस में, इन टाइमलाइन को animation-timeline प्रॉपर्टी का इस्तेमाल करके किसी ऐनिमेशन से जोड़ा जा सकता है. आइए, जानते हैं कि इन नई समयसीमाओं का क्या मतलब है और ये एक-दूसरे से किस तरह अलग हैं.

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

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

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

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

इस तरह की टाइमलाइन, स्क्रोल कंटेनर में मौजूद किसी एलिमेंट की प्रोग्रेस से जुड़ी होती है. स्क्रोल प्रोग्रेस टाइमलाइन की तरह ही, स्क्रोलर के स्क्रोल ऑफ़सेट को ट्रैक किया जाता है. स्क्रोल प्रोग्रेस टाइमलाइन के उलट, इसमें स्क्रोलर में मौजूद किसी विषय की रिलेटिव पोज़िशन से प्रोग्रेस तय होती है. इसकी तुलना IntersectionObserver से की जा सकती है. यह ट्रैकिंग करती है कि स्क्रोलर में कोई एलिमेंट कितना दिखता है. अगर एलिमेंट स्क्रोलर में नहीं दिखता है, तो इसका मतलब है कि वह इंटरसेक्ट नहीं हो रहा है. अगर यह स्क्रोलर के अंदर दिखता है, भले ही यह सबसे छोटा हिस्सा हो, तो इसका मतलब है कि यह इंटरसेक्ट हो रहा है.

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

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

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

व्यू टाइमलाइन के लिए, इन रेंज को टारगेट किया जा सकता है: cover, contain, entry, exit, entry-crossing, और exit-crossing. इन रेंज के बारे में इस कोडलैब में बाद में बताया गया है. हालांकि, अगर आपको इनके बारे में तुरंत जानना है, तो https://goo.gle/view-timeline-range-tool पर मौजूद टूल का इस्तेमाल करके देखें कि हर रेंज का क्या मतलब है.

4. पैरलैक्स बैकग्राउंड इफ़ेक्ट बनाना

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

इसे लागू करने के लिए, ये दो चरण पूरे करें:

बैकग्राउंड इमेज की जगह बदलने वाला ऐनिमेशन बनाएं.
ऐनिमेशन को दस्तावेज़ के स्क्रोल प्रोग्रेशन से लिंक करें.

ऐनिमेशन बनाना

ऐनिमेशन बनाने के लिए, कीफ़्रेम के सामान्य सेट का इस्तेमाल करें. इसमें, बैकग्राउंड की पोज़िशन को वर्टिकल तौर पर 0% से 100% पर ले जाएं:

src/styles.css

@keyframes move-background {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}

अब इन मुख्य फ़्रेम को बॉडी एलिमेंट से अटैच करें:

src/styles.css

body {
  animation: 1s linear move-background;
}

इस कोड की मदद से, move-background ऐनिमेशन को बॉडी एलिमेंट में जोड़ा जाता है. इसकी animation-duration प्रॉपर्टी को एक सेकंड पर सेट किया गया है. साथ ही, इसमें linear ईज़िंग का इस्तेमाल किया गया है.

गुमनाम स्क्रोल प्रोग्रेस टाइमलाइन का इस्तेमाल करके, ऐनिमेशन को रूट के स्क्रोल प्रोग्रेशन से लिंक करना

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

scroll() फ़ंक्शन, <scroller> और <axis> आर्ग्युमेंट स्वीकार करता है.

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

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

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

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

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

बॉडी पर animation-timeline प्रॉपर्टी की वैल्यू के तौर पर scroll(root block) को सेट करें.
इसके अलावा, animation-duration को सेकंड में दिखाने का कोई मतलब नहीं है. इसलिए, अवधि को auto पर सेट करें. अगर आपने कोई animation-duration नहीं चुना है, तो डिफ़ॉल्ट रूप से auto का इस्तेमाल किया जाएगा.

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(root block);
}

रूट स्क्रोलर, body एलिमेंट के लिए सबसे नज़दीकी पैरंट स्क्रोलर भी होता है. इसलिए, nearest वैल्यू का भी इस्तेमाल किया जा सकता है:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(nearest block);
}

nearest और block डिफ़ॉल्ट वैल्यू हैं. इसलिए, इन्हें शामिल न करने का विकल्प भी चुना जा सकता है. ऐसे में, कोड को इस तरह से आसान बनाया जा सकता है:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll();
}

अपने बदलावों की पुष्टि करना

अगर सब कुछ ठीक रहा, तो अब आपको यह दिखना चाहिए:

अगर ऐसा नहीं है, तो कोड की solution-step-1 ब्रांच देखें.

5. इमेज गैलरी के लिए प्रोग्रेस बार बनाना

पेज पर एक हॉरिज़ॉन्टल कैरसेल है. इसमें एक प्रोग्रेस बार होना चाहिए, ताकि यह पता चल सके कि फ़िलहाल कौनसी फ़ोटो दिख रही है.

कैरोसेल के लिए मार्कअप ऐसा दिखता है:

src/index.html

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

प्रोग्रेस बार के लिए कीफ़्रेम पहले से ही मौजूद हैं और वे इस तरह दिखते हैं:

src/styles.css

@keyframes adjust-progress {
  from {
    transform: scaleX(calc(1 / var(--num-images)));
  }
  to {
    transform: scaleX(1);
  }
}

ध्यान दें: इस कीफ़्रेम सेट में, scaleX() की वैल्यू सेट की गई है. यह वैल्यू, .gallery__scrollcontainer में मौजूद .gallery__entry एलिमेंट की संख्या के आधार पर तय की जाती है. यह जानकारी, स्क्रोलर के स्टाइल एट्रिब्यूट में मौजूद --num-children कस्टम प्रॉपर्टी से मिलती है. इससे स्क्रोलबार को ऐनिमेशन की शुरुआत में एक तय चौड़ाई मिलती है. उदाहरण के लिए, अगर स्क्रोल कंटेनर में चार एलिमेंट हैं, तो प्रोग्रेस बार की शुरुआती चौड़ाई 25% होनी चाहिए. जैसा कि आपको चार में से पहली इमेज में दिख रहा है.

इस ऐनिमेशन को से अटैच करना होगा .स्क्रोल प्रोग्रेस टाइमलाइन वाला gallery__progress एलिमेंट. पिछले चरण में दिखाए गए तरीके से, scroll() फ़ंक्शन का इस्तेमाल करके, स्क्रोल प्रोग्रेस टाइमलाइन बनाई जा सकती है:

src/styles.css

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  animation-timeline: scroll(nearest inline);
}

यह कोड काम नहीं करता है. ऐसा इसलिए है, क्योंकि nearest का इस्तेमाल करके, स्क्रोल कंटेनर को अपने-आप ढूंढने की सुविधा काम नहीं करती. सबसे नज़दीकी स्क्रोलर ढूंढते समय, एलिमेंट सिर्फ़ उन एलिमेंट पर विचार करेगा जो उसकी पोज़िशन पर असर डाल सकते हैं. .gallery__progress को ऐब्सलूट पोज़िशन पर रखा गया है. इसलिए, इसकी पोज़िशन तय करने वाला पहला पैरंट एलिमेंट .gallery होगा, क्योंकि इसमें position: relative लागू किया गया है. इसका मतलब है कि इस ऑटोमैटिक लुकअप के दौरान, .gallery__scrollcontainer एलिमेंट को टारगेट नहीं किया जाता. यह वह स्क्रोलर होता है जिसे टारगेट करना होता है.

इस समस्या को हल करने के लिए, .gallery__scrollcontainer एलिमेंट पर स्क्रोल प्रोग्रेस टाइमलाइन बनाएं और उस नाम का इस्तेमाल करके, .gallery__progress को उससे लिंक करें.

नाम वाली स्क्रोल प्रोग्रेस टाइमलाइन बनाना और उसे लिंक करना

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

गैलरी को हॉरिज़ॉन्टल तरीके से स्क्रोल किया जाता है. इसलिए, आपको scroll-timeline-axis प्रॉपर्टी भी सेट करनी होगी. इस्तेमाल की जा सकने वाली वैल्यू, scroll() फ़ंक्शन के <axis> आर्ग्युमेंट के लिए इस्तेमाल की जा सकने वाली वैल्यू के जैसी ही होती हैं.

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

styles.css फ़ाइल में बदलाव करके, ये चीज़ें शामिल करें:

src/styles.css

.gallery__scrollcontainer {
  /* Create the gallery-is-scrolling timeline */
  scroll-timeline-name: --gallery-is-scrolling;
  scroll-timeline-axis: inline;
}

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  /* Set gallery-is-scrolling as the timeline */
  animation-timeline: --gallery-is-scrolling;
}

अपने बदलावों की पुष्टि करना

अगर सब कुछ ठीक रहा, तो अब आपको यह दिखना चाहिए:

अगर ऐसा नहीं है, तो कोड की solution-step-2 ब्रांच देखें.

6. गैलरी की इमेज को स्क्रोलपोर्ट में शामिल करते और हटाते समय ऐनिमेट करना

गैलरी की इमेज को धीरे-धीरे दिखाना

अनजान उपयोगकर्ताओं के लिए, वीडियो देखने की प्रोग्रेस की टाइमलाइन सेट अप करना

गैलरी में मौजूद इमेज को व्यू में आने पर फ़ेड इन करने का इफ़ेक्ट जोड़ा जा सकता है. इसके लिए, 'प्रोग्रेस टाइमलाइन देखें' सुविधा का इस्तेमाल किया जा सकता है.

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

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

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

src/styles.css

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

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
}

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

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

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

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

src/styles.css

.gallery__entry {
  animation: linear fade-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry 0% entry 100%;
}

अब एनिमेशन, entry 0% (सब्जेक्ट स्क्रोलर में आने वाला है) से entry 100% (सब्जेक्ट स्क्रोलर में पूरी तरह से आ गया है) तक चलता है.

टाइमलाइन की इन रेंज को देखा जा सकता है:

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

https://goo.gle/view-timeline-range-tool पर मौजूद टूल का इस्तेमाल करके देखें कि हर रेंज क्या दिखाती है. साथ ही, प्रतिशत से शुरू और खत्म होने की स्थितियों पर क्या असर पड़ता है.

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

src/styles.css

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry;
}

गैलरी की इमेज को धीरे-धीरे धुंधला करना

स्क्रोलर से बाहर निकलते समय इमेज को धुंधला करने के लिए, ऐनिमेट-इन ऐनिमेशन की तरह ही काम किया जा सकता है. हालांकि, इसके लिए आपको अलग रेंज को टारगेट करना होगा.

src/styles.css

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

.gallery__entry {
  animation: linear animate-in, linear animate-out;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry, exit;
}

animate-in कीफ़्रेम, entry रेंज पर लागू होंगे. वहीं, animate-out कीफ़्रेम, exit रेंज पर लागू होंगे.

अपने बदलावों की पुष्टि करना

अगर सब कुछ ठीक रहा, तो अब आपको यह दिखना चाहिए:

अगर ऐसा नहीं है, तो कोड की solution-step-3 ब्रांच देखें.

7. स्क्रोलपोर्ट में इमेज के दिखने और हटने पर, उन्हें ऐनिमेट करें. इसके लिए, कीफ़्रेम के एक सेट का इस्तेमाल करें

एक सेट के कीफ़्रेम का उदाहरण

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

कीफ़्रेम का आकार ऐसा दिखता है:

@keyframes keyframes-name {
  range-name range-offset {
    ...
  }
  range-name range-offset {
    ...
  }
}

फ़ेड-इन और फ़ेड-आउट वाले मुख्य फ़्रेम को इस तरह मिलाएं:

src/styles.css

@keyframes animate-in-and-out {
  entry 0% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  entry 90% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }

  exit 10% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  exit 100% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

अगर रेंज की जानकारी कीफ़्रेम में मौजूद है, तो अब आपको animation-range को अलग से तय करने की ज़रूरत नहीं है. मुख्य फ़्रेम को animation प्रॉपर्टी के तौर पर अटैच करें.

src/styles.css

.gallery__entry {
  animation: linear animate-in-and-out both;
  animation-duration: auto;
  animation-timeline: view(inline);
}

अपने बदलावों की पुष्टि करना

अगर सब कुछ ठीक रहा, तो आपको पिछले चरण जैसा ही नतीजा मिलेगा. अगर ऐसा नहीं है, तो कोड की solution-step-4 ब्रांच देखें.

8. बधाई हो!

आपने यह कोडलैब पूरा कर लिया है. अब आपको सीएसएस में स्क्रोल प्रोग्रेस टाइमलाइन और व्यू प्रोग्रेस टाइमलाइन बनाने का तरीका पता है!

ज़्यादा जानें

संसाधन: