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

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

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

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

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

ध्यान दें: स्क्रोल-ड्रिवन ऐनिमेशन स्पेसिफ़िकेशन से मिलने वाले JavaScript के बारे में इस कोडलैब में नहीं बताया गया है.

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

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

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

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

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

2. सेट अप करें

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

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

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

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

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

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

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

src/styles.css

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

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

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__scrollcontainer में मौजूद .gallery__entry एलिमेंट की संख्या के आधार पर, स्टार्ट scaleX() सेट किया गया है. यह स्क्रोलर के स्टाइल एट्रिब्यूट में --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>, स्क्रोल प्रोग्रेस टाइमलाइन में मौजूद <axis> जैसा ही होता है. इससे यह तय होता है कि किस अक्ष को ट्रैक करना है.
• <view-timeline-inset> की मदद से, किसी एलिमेंट के व्यू में होने या न होने के आधार पर, बॉउंड में बदलाव करने के लिए ऑफ़सेट (पॉज़िटिव या नेगेटिव) तय किया जा सकता है.

ध्यान दें: व्यू टाइमलाइन का <scroller> तय नहीं किया जा सकता, क्योंकि यह हमेशा अपने सबसे नज़दीकी पैरंट स्क्रोलर में मौजूद ऑब्जेक्ट को ट्रैक करता है.

• की-फ़्रेम पहले से ही मौजूद होते हैं. इसलिए, आपको उन्हें सिर्फ़ अटैच करना होता है. ऐसा करने के लिए, हर .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);
}

ध्यान दें: view() का इस्तेमाल करके, व्यू की प्रोग्रेस की ऐसी टाइमलाइन बनाई जाती है जिसमें आपका नाम नहीं दिखता. नाम वाली स्क्रोल प्रोग्रेस टाइमलाइन बनाने की तरह ही, इसके लिए खास प्रॉपर्टी का इस्तेमाल करके, नाम वाली व्यू प्रोग्रेस टाइमलाइन बनाई जा सकती है. प्रॉपर्टी view-timeline-name और view-timeline-axis हैं. ये scroll-timeline-* के जैसे ही काम करते हैं.

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

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

ध्यान दें: शुरू और खत्म होने की animation-range के लिए, अलग-अलग रेंज को टारगेट किया जा सकता है.

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

2. जब रेंज की जानकारी कीवर्ड में मौजूद होती है, तो आपको 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. बधाई हो!

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

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

रिसॉर्स:

• स्क्रोल करने पर, स्क्रोल-ड्रिवन ऐनिमेशन की मदद से एलिमेंट ऐनिमेट करना
• टाइमलाइन की रेंज विज़ुअलाइज़र देखना
• वेब ऐनिमेशन में नया क्या है (Google I/O'23)