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

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

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

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

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

आप इन चीज़ों के बारे में जानेंगे

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

आपको इनकी ज़रूरत होगी

नीचे दिए गए डिवाइस के कॉम्बिनेशन में से कोई एक:

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

2. सेट अप करें

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

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

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. पैरालक्स बैकग्राउंड इफ़ेक्ट बनाएं

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

इसे लागू करने के दो चरण हैं:

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

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

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

src/styles.css

@keyframes move-background {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}
  1. अब इन कीफ़्रेम को बॉडी एलिमेंट से अटैच करें:

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);
}

रूट स्क्रोलर, बॉडी एलिमेंट के लिए सबसे नज़दीकी पैरंट स्क्रोलर भी होता है. इसलिए, 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);
  }
}

इस ऐनिमेशन को .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 रेंज के नाम से जाना जाता है.

  1. विषय की सिर्फ़ 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 पर मौजूद टूल का इस्तेमाल करके देखें कि हर रेंज क्या बताती है और प्रतिशत का शुरुआती और आखिरी पोज़िशन पर क्या असर पड़ता है.

  1. यहां शुरू और खत्म होने की सीमाएं एक जैसी हैं और डिफ़ॉल्ट ऑफ़सेट का इस्तेमाल किया जाता है. इसलिए, 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 {
    ...
  }
}
  1. फ़ेड-इन और फ़ेड-आउट कीफ़्रेम को इस तरह से जोड़ें:

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%);
  }
}
  1. जब कीफ़्रेम में रेंज की जानकारी मौजूद होती है, तो आपको 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. बधाई हो!

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

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

रिसॉर्स: