सीएसएस एनीमेशन रेंज: स्क्रॉल-संचालित एनीमेशन नियंत्रण - एक व्यापक मार्गदर्शिका

वेब विकास के लगातार विकसित हो रहे परिदृश्य में, आकर्षक और इंटरैक्टिव उपयोगकर्ता अनुभव बनाना सर्वोपरि है। इस क्षेत्र में सबसे रोमांचक प्रगति में से एक स्क्रॉल-संचालित एनीमेशन है, जो आपको सीएसएस एनिमेशन को सीधे उपयोगकर्ता की स्क्रॉल स्थिति से जोड़ने की अनुमति देता है। यह तकनीक, जिसे अक्सर सीएसएस एनीमेशन रेंज के रूप में जाना जाता है, रचनात्मकता और नियंत्रण का एक नया स्तर खोलती है, जिससे आप गतिशील और इमर्सिव वेब एप्लिकेशन बना सकते हैं।

सीएसएस एनीमेशन रेंज क्या है?

सीएसएस एनीमेशन रेंज सीएसएस एनिमेशन को किसी तत्व या संपूर्ण दस्तावेज़ की स्क्रॉल स्थिति के आधार पर नियंत्रित करने की क्षमता को संदर्भित करता है। एनिमेशन को होवर या क्लिक जैसे इवेंट द्वारा ट्रिगर किए जाने के बजाय, वे सीधे इस बात से जुड़े होते हैं कि उपयोगकर्ता ने कितनी दूर स्क्रॉल किया है। यह उपयोगकर्ता इंटरैक्शन (स्क्रॉलिंग) और दृश्य प्रतिक्रिया (एनीमेशन) के बीच एक प्राकृतिक और सहज संबंध बनाता है।

पारंपरिक सीएसएस एनिमेशन आमतौर पर समय-आधारित होते हैं, जो एनीमेशन अनुक्रम को परिभाषित करने के लिए animation-duration और कीफ्रेम का उपयोग करते हैं। हालाँकि, स्क्रॉल-संचालित एनिमेशन समय-आधारित प्रगति को स्क्रॉल-आधारित प्रगति से बदल देते हैं। जैसे ही उपयोगकर्ता स्क्रॉल करता है, एनीमेशन उनके स्क्रॉल किए गए अमाउंट के अनुपात में आगे बढ़ता है।

स्क्रॉल-संचालित एनिमेशन का उपयोग क्यों करें?

अपने वेब प्रोजेक्ट में स्क्रॉल-संचालित एनिमेशन को शामिल करने के कई सम्मोहक कारण हैं:

• बेहतर उपयोगकर्ता अनुभव: स्क्रॉल-संचालित एनिमेशन अधिक आकर्षक और इंटरैक्टिव अनुभव प्रदान करते हैं। वे वेबसाइटों को अधिक प्रतिक्रियाशील और गतिशील महसूस कराते हैं, उपयोगकर्ताओं को लुभाते हैं और उन्हें आगे एक्सप्लोर करने के लिए प्रोत्साहित करते हैं। उदाहरण के लिए, एक छवि जो धीरे-धीरे खुद को प्रकट करती है जैसे ही आप इसके पास स्क्रॉल करते हैं, या एक प्रगति बार जो आपकी पढ़ने के साथ सिंक में भर जाता है।
• बेहतर कहानी सुनाना: एनिमेशन का उपयोग उपयोगकर्ताओं को एक कहानी के माध्यम से मार्गदर्शन करने के लिए किया जा सकता है, जो जानकारी को ठीक उसी समय प्रकट करता है। यह लंबी-चौड़ी सामग्री या उत्पाद प्रदर्शन के लिए विशेष रूप से प्रभावी है। एक उत्पाद पृष्ठ की कल्पना करें जहां सुविधाएँ दृश्य में एनिमेट होती हैं क्योंकि उपयोगकर्ता लाभों के माध्यम से स्क्रॉल करता है।
• प्रासंगिक प्रतिक्रिया: स्क्रॉल-संचालित एनिमेशन पृष्ठ के भीतर उपयोगकर्ता की स्थिति पर दृश्य प्रतिक्रिया प्रदान कर सकते हैं। यह उपयोगकर्ताओं को उनकी प्रगति समझने में मदद करता है और उन्हें स्क्रॉल करना जारी रखने के लिए प्रोत्साहित करता है। सामग्री की एक तालिका पर विचार करें जो लेख के माध्यम से स्क्रॉल करते समय वर्तमान अनुभाग को हाइलाइट करती है।
• प्रदर्शन लाभ: जब सही ढंग से लागू किया जाता है, तो स्क्रॉल-संचालित एनिमेशन जावास्क्रिप्ट-आधारित विकल्पों की तुलना में अधिक प्रदर्शनकारी हो सकते हैं। ब्राउज़र अक्सर सीएसएस एनिमेशन को अधिक कुशलता से अनुकूलित कर सकता है, जिससे विशेष रूप से मोबाइल उपकरणों पर, स्मूथर और अधिक प्रतिक्रियाशील एनिमेशन होते हैं।

मुख्य अवधारणाएँ और तकनीकें

सीएसएस का उपयोग करके स्क्रॉल-संचालित एनिमेशन बनाने में कई प्रमुख अवधारणाएँ और तकनीकें शामिल हैं। इन्हें समझने से आपको अपनी परियोजनाओं में स्क्रॉल-संचालित प्रभावों को प्रभावी ढंग से लागू करने में मदद मिलेगी:

1. scroll() टाइमलाइन

सीएसएस एनीमेशन रेंज की नींव scroll() टाइमलाइन है। यह टाइमलाइन एक एनीमेशन को एक विशिष्ट तत्व की स्क्रॉल प्रगति से जोड़ता है। आप अपने सीएसएस में टाइमलाइन को परिभाषित करते हैं और फिर इस टाइमलाइन के आधार पर तत्वों पर एनिमेशन लागू करते हैं।

वर्तमान में, आधिकारिक सीएसएस स्क्रॉल टाइमलाइन विनिर्देश का समर्थन ब्राउज़र में भिन्न होता है। हालाँकि, आप क्रॉस-ब्राउज़र संगतता प्राप्त करने के लिए पॉलीफिल (जैसे `scroll-timeline` पॉलीफिल) का उपयोग कर सकते हैं। ये पॉलीफिल उन ब्राउज़रों में सीएसएस स्क्रॉल टाइमलाइन कार्यक्षमता का अनुकरण करने के लिए आवश्यक जावास्क्रिप्ट जोड़ते हैं जो अभी तक इसे मूल रूप से समर्थन नहीं करते हैं।

2. सीएसएस कस्टम प्रॉपर्टीज (वेरिएबल्स)

सीएसएस कस्टम प्रॉपर्टीज, जिसे सीएसएस वेरिएबल के रूप में भी जाना जाता है, एनिमेशन के गतिशील नियंत्रण के लिए आवश्यक हैं। वे आपको स्क्रॉल-संबंधित मानों को अपने सीएसएस एनिमेशन में पास करने की अनुमति देते हैं, जिससे वे स्क्रॉल इवेंट के प्रति प्रतिक्रियाशील हो जाते हैं।

3. animation-timeline प्रॉपर्टी

animation-timeline प्रॉपर्टी का उपयोग उस टाइमलाइन को निर्दिष्ट करने के लिए किया जाता है जिसका एक एनीमेशन उपयोग करना चाहिए। यहीं पर आप अपने एनीमेशन को scroll() टाइमलाइन से जोड़ते हैं।

4. animation-range प्रॉपर्टी

animation-range प्रॉपर्टी स्क्रॉल टाइमलाइन के उस भाग को परिभाषित करती है जिस पर एनीमेशन चलना चाहिए। यह आपको स्क्रॉल स्थिति के आधार पर यह नियंत्रित करने की अनुमति देता है कि एनीमेशन कब शुरू होता है और कब रुकता है। इसमें दो मान लगते हैं: आरंभ और अंत स्क्रॉल ऑफसेट।

5. पॉलीफिलिंग और उन्नत नियंत्रण के लिए जावास्क्रिप्ट

जबकि सीएसएस मुख्य कार्यक्षमता प्रदान करता है, जावास्क्रिप्ट का उपयोग ब्राउज़र समर्थन को पॉलीफिलिंग करने और एनिमेशन पर अधिक उन्नत नियंत्रण जोड़ने के लिए किया जा सकता है। उदाहरण के लिए, आप स्क्रॉल ऑफसेट की गणना गतिशील रूप से करने या विशिष्ट स्क्रॉल थ्रेसहोल्ड के आधार पर एनिमेशन को ट्रिगर करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

स्क्रॉल-संचालित एनिमेशन को लागू करना: एक व्यावहारिक उदाहरण

आइए एक सरल स्क्रॉल-संचालित एनीमेशन बनाने के एक व्यावहारिक उदाहरण पर चलते हैं। इस उदाहरण में, हम एक प्रगति बार बनाएंगे जो उपयोगकर्ता के पृष्ठ को नीचे स्क्रॉल करने पर भर जाता है।

HTML संरचना

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>[यहां लंबी सामग्री]</p>
</div>

सीएसएस स्टाइलिंग

.progress-container {
  width: 100%;
  height: 10px;
  background-color: #eee;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.progress-bar {
  height: 10px;
  background-color: #4CAF50;
  width: 0%;
  /* स्क्रॉल-संचालित एनीमेशन */
  animation: fillProgressBar linear;
  animation-timeline: scroll(root);
  animation-range: 0px auto;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to { width: 100%; }
}

स्पष्टीकरण

• .progress-container पृष्ठ के शीर्ष पर एक निश्चित-स्थिति वाला तत्व है।
• .progress-bar वह वास्तविक प्रगति बार है जो भर जाएगा।
• animation: fillProgressBar लाइन एनीमेशन लागू करती है।
• animation-timeline: scroll(root) एनीमेशन को दस्तावेज़ की स्क्रॉल प्रगति से जोड़ता है। scroll(root) रूट स्क्रॉलिंग तत्व (<html> तत्व) को इंगित करता है।
• animation-range: 0px auto निर्दिष्ट करता है कि एनीमेशन पृष्ठ के शीर्ष (0px) पर शुरू होना चाहिए और जब उपयोगकर्ता स्क्रॉल करने योग्य सामग्री के अंत तक पहुँच जाता है (auto) पर समाप्त होना चाहिए।
• animation-fill-mode: forwards यह सुनिश्चित करता है कि उपयोगकर्ता के सामग्री के अंत तक पहुंचने के बाद प्रगति बार भरा रहे।
• @keyframes fillProgressBar स्वयं एनीमेशन को परिभाषित करता है, जो बस प्रगति बार की चौड़ाई को 0% से 100% तक बढ़ाता है।

यह उदाहरण स्क्रॉल-संचालित एनीमेशन बनाने का एक बुनियादी चित्रण प्रदान करता है। आप अधिक जटिल और दृश्यमान अपील करने वाले प्रभाव बनाने के लिए इस तकनीक को अनुकूलित कर सकते हैं।

उन्नत तकनीकें और विचार

मूल कार्यान्वयन से परे, कई उन्नत तकनीकें आपके स्क्रॉल-संचालित एनिमेशन को बढ़ा सकती हैं:

1. इजिंग फंक्शन्स का उपयोग करना

इजिंग फंक्शन्स एनीमेशन की गति को नियंत्रित करते हैं, जिससे यह अधिक प्राकृतिक और उत्तरदायी महसूस होता है। आप अपने स्क्रॉल-संचालित एनिमेशन में विभिन्न इजिंग फंक्शन्स को लागू करने के लिए animation-timing-function प्रॉपर्टी का उपयोग कर सकते हैं। सामान्य इजिंग फंक्शन्स में ease-in, ease-out, ease-in-out और linear शामिल हैं। आप अधिक जटिल इजिंग प्रभाव बनाने के लिए कस्टम क्यूबिक बेज़ियर वक्रों का भी उपयोग कर सकते हैं।

2. एकाधिक प्रॉपर्टीज़ को एनिमेट करना

स्क्रॉल-संचालित एनिमेशन केवल एक ही प्रॉपर्टी तक सीमित नहीं हैं। आप एक ही समय में कई सीएसएस प्रॉपर्टीज़ को एनिमेट कर सकते हैं, जिससे अधिक समृद्ध और जटिल प्रभाव पैदा होते हैं। उदाहरण के लिए, आप स्क्रॉल स्थिति के आधार पर किसी तत्व के स्थान, अस्पष्टता और पैमाने को एनिमेट कर सकते हैं।

3. विशिष्ट स्क्रॉल पॉइंट्स पर एनिमेशन को ट्रिगर करना

आप उस स्क्रॉल स्थिति की गणना करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं जिस पर एनीमेशन शुरू या बंद होना चाहिए। यह आपको ऐसे एनिमेशन बनाने की अनुमति देता है जो पृष्ठ में विशिष्ट बिंदुओं पर ट्रिगर होते हैं, जैसे कि जब कोई तत्व दृश्य में आता है। इसे स्क्रॉल स्थिति को ट्रैक करने और एनीमेशन को नियंत्रित करने वाले सीएसएस वैरिएबल्स को अपडेट करने वाले इवेंट लिसनर्स का उपयोग करके प्राप्त किया जा सकता है।

4. प्रदर्शन अनुकूलन

स्क्रॉल-संचालित एनिमेशन लागू करते समय प्रदर्शन महत्वपूर्ण है। यहां प्रदर्शन को अनुकूलित करने के लिए कुछ सुझाव दिए गए हैं:

• सीएसएस ट्रांसफॉर्म और ओपेसिटी का प्रयोग करें: transform (जैसे, translate, rotate, scale) और opacity जैसी प्रॉपर्टीज़ को एनिमेट करना उन प्रॉपर्टीज़ को एनिमेट करने की तुलना में अधिक प्रदर्शनकारी होता है जो लेआउट रीफ्लो को ट्रिगर करती हैं (जैसे, width, height, top, left)।
• स्क्रॉल इवेंट्स को डिबाउंस करें: यदि आप एनिमेशन को नियंत्रित करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं, तो एनीमेशन को अपडेट किए जाने की संख्या को कम करने के लिए स्क्रॉल इवेंट हैंडलर को डिबाउंस करें। डिबाउंसिंग उस दर को सीमित करता है जिस पर एक फ़ंक्शन फ़ायर हो सकता है।
• will-change का उपयोग करें: will-change प्रॉपर्टी ब्राउज़र को यह सूचित करके एनिमेशन को अनुकूलित करने में मदद कर सकती है कि एक विशिष्ट प्रॉपर्टी को एनिमेट किया जाएगा। हालाँकि, इसका उपयोग संयम से करें क्योंकि इसका अधिक उपयोग करने पर यह संसाधन खा सकता है।
• अपने कोड को प्रोफाइल करें: अपने एनिमेशन को प्रोफाइल करने और प्रदर्शन बाधाओं की पहचान करने के लिए ब्राउज़र डेवलपर टूल का उपयोग करें।

ब्राउज़र संगतता और पॉलीफिल

जैसा कि पहले उल्लेख किया गया है, सीएसएस स्क्रॉल टाइमलाइन और एनीमेशन रेंज के लिए मूल समर्थन अभी भी विकसित हो रहा है। क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए, आपको संभवतः एक पॉलीफिल का उपयोग करने की आवश्यकता होगी। `scroll-timeline` पॉलीफिल एक लोकप्रिय विकल्प है।

स्क्रॉल-संचालित एनिमेशन लागू करने से पहले, प्रासंगिक सीएसएस प्रॉपर्टीज़ के लिए वर्तमान ब्राउज़र समर्थन की जांच करना और पुराने ब्राउज़रों के लिए फ़ॉलबैक समर्थन प्रदान करने के लिए एक पॉलीफिल का उपयोग करने पर विचार करना आवश्यक है। आप caniuse.com जैसी वेबसाइटों पर ब्राउज़र संगतता की जांच कर सकते हैं।

वास्तविक दुनिया के उदाहरण और उपयोग के मामले

उपयोगकर्ता अनुभव को बढ़ाने और आकर्षक वेब एप्लिकेशन बनाने के लिए स्क्रॉल-संचालित एनिमेशन का उपयोग विभिन्न वास्तविक दुनिया के परिदृश्यों में किया जा सकता है। यहां कुछ उदाहरण दिए गए हैं:

• उत्पाद प्रदर्शन: उपयोगकर्ता के उत्पाद विवरण के माध्यम से स्क्रॉल करने पर उत्पाद सुविधाओं को एनिमेट करें। यह प्रमुख विक्रय बिंदुओं को उजागर करने और अधिक इमर्सिव उत्पाद अनुभव बनाने में मदद कर सकता है। उदाहरण के लिए, एक कार निर्माता उपयोगकर्ता के विनिर्देश पृष्ठ को नीचे स्क्रॉल करते ही विभिन्न सुरक्षा सुविधाओं को एनिमेट कर सकता है।
• इंटरैक्टिव ट्यूटोरियल: उपयोगकर्ताओं को एक ट्यूटोरियल के माध्यम से मार्गदर्शन करें, चरणों को प्रकट करें क्योंकि वे पृष्ठ को नीचे स्क्रॉल करते हैं। यह जटिल जानकारी को समझने और बनाए रखने में आसान बना सकता है। एक इंटरैक्टिव प्रोग्रामिंग ट्यूटोरियल के बारे में सोचें जहां कोड स्निपेट दिखाई देते हैं और आप स्क्रॉल करते ही हाइलाइट होते हैं।
• डेटा विज़ुअलाइज़ेशन: उपयोगकर्ता के डेटा के माध्यम से स्क्रॉल करते ही चार्ट और ग्राफ़ को एनिमेट करें। यह उपयोगकर्ताओं को डेटा को बेहतर ढंग से समझने और अंतर्दृष्टि प्राप्त करने में मदद कर सकता है। एक वित्तीय वेबसाइट बाजार की घटनाओं की एक टाइमलाइन के माध्यम से उपयोगकर्ता के स्क्रॉल करते ही स्टॉक की कीमतों को एनिमेट कर सकती है।
• पोर्टफोलियो वेबसाइटें: स्क्रॉल-संचालित एनिमेशन के साथ एक दृश्यमान तेजस्वी पोर्टफोलियो वेबसाइट बनाएं जो आपके काम को प्रदर्शित करती है। एक कलाकार के पोर्टफोलियो में छवियां सूक्ष्म रूप से ज़ूम या फीका पड़ सकती हैं जैसे ही उपयोगकर्ता उनके काम की पड़ताल करते हैं।
• कहानी सुनाना: कहानी बताने के लिए एनिमेशन का उपयोग करें, जानकारी को ठीक उसी समय प्रकट करें। एक समाचार वेबसाइट स्क्रॉल-संचालित एनिमेशन का उपयोग एक लंबी-चौड़ी लेख को बढ़ाने के लिए कर सकती है।

वैश्विक पहुंच संबंधी विचार

स्क्रॉल-संचालित एनिमेशन लागू करते समय, सभी उपयोगकर्ताओं के लिए पहुंच पर विचार करना महत्वपूर्ण है। यहां सुलभ एनिमेशन बनाने के लिए कुछ युक्तियां दी गई हैं:

• विकल्प प्रदान करें: उन उपयोगकर्ताओं के लिए सामग्री तक पहुंचने के वैकल्पिक तरीके प्रदान करें जो एनिमेशन को देखने या उनके साथ इंटरैक्ट करने में सक्षम नहीं हो सकते हैं। इसमें एनिमेशन का टेक्स्ट विवरण देना या उपयोगकर्ताओं को एनिमेशन को पूरी तरह से अक्षम करने की अनुमति देना शामिल हो सकता है।
• चमकती सामग्री से बचें: चमकती एनिमेशन या ऐसी सामग्री का उपयोग करने से बचें जो तेजी से बदलती है, क्योंकि यह फोटोसेंसिटिव मिर्गी वाले उपयोगकर्ताओं में दौरे को ट्रिगर कर सकती है।
• स्पष्ट और संक्षिप्त एनिमेशन का प्रयोग करें: एनिमेशन को छोटा, सरल और समझने में आसान रखें। अत्यधिक जटिल या विचलित करने वाले एनिमेशन का उपयोग करने से बचें जो उपयोगकर्ताओं को अभिभूत कर सकते हैं।
• सहायक तकनीकों के साथ परीक्षण करें: यह सुनिश्चित करने के लिए सहायक तकनीकों, जैसे स्क्रीन रीडर के साथ अपने एनिमेशन का परीक्षण करें कि वे विकलांगता वाले उपयोगकर्ताओं के लिए सुलभ हैं।
• उपयोगकर्ता वरीयताओं का सम्मान करें: कम गति के लिए उपयोगकर्ताओं की प्राथमिकताओं का सम्मान करें। कई ऑपरेटिंग सिस्टम और ब्राउज़र उपयोगकर्ताओं को अनुरोध करने की अनुमति देते हैं कि एनिमेशन अक्षम कर दिए जाएं। इस सेटिंग का पता लगाने और तदनुसार एनिमेशन को अक्षम करने के लिए prefers-reduced-motion सीएसएस मीडिया क्वेरी का उपयोग करें।

सीएसएस एनीमेशन रेंज का भविष्य

सीएसएस एनीमेशन रेंज एक तेजी से विकसित होने वाली तकनीक है, और हम भविष्य में और प्रगति और सुधार देखने की उम्मीद कर सकते हैं। जैसे-जैसे सीएसएस स्क्रॉल टाइमलाइन विनिर्देश के लिए ब्राउज़र समर्थन बढ़ता रहता है, हम देखेंगे कि अधिक डेवलपर इस तकनीक को आकर्षक और इंटरैक्टिव वेब अनुभव बनाने के लिए अपना रहे हैं। भविष्य के विकास में शामिल हो सकते हैं:

• अधिक उन्नत स्क्रॉल टाइमलाइन सुविधाएँ: सीएसएस स्क्रॉल टाइमलाइन विनिर्देश में अधिक उन्नत सुविधाएँ जोड़ी जाने की उम्मीद करें, जैसे कि अधिक जटिल स्क्रॉल टाइमलाइन को परिभाषित करने और अधिक सटीकता के साथ एनिमेशन को नियंत्रित करने की क्षमता।
• बेहतर प्रदर्शन: ब्राउज़र विक्रेता संभवतः स्क्रॉल-संचालित एनिमेशन के प्रदर्शन को अनुकूलित करना जारी रखेंगे, जिससे वे और भी स्मूथर और अधिक प्रतिक्रियाशील हो जाएंगे।
• वेब कंपोनेंट्स के साथ एकीकरण: स्क्रॉल-संचालित एनिमेशन को वेब कंपोनेंट्स के साथ एकीकृत किया जा सकता है, जिससे डेवलपर्स पुन: प्रयोज्य एनीमेशन कंपोनेंट्स बना सकते हैं जिन्हें आसानी से किसी भी वेब प्रोजेक्ट में एकीकृत किया जा सकता है।

निष्कर्ष

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

स्क्रॉल-संचालित एनिमेशन को लागू करते समय प्रदर्शन और पहुंच को प्राथमिकता देना याद रखें। सर्वोत्तम प्रथाओं का पालन करके और सभी उपयोगकर्ताओं की आवश्यकताओं पर विचार करके, आप ऐसे एनिमेशन बना सकते हैं जो देखने में आकर्षक और समावेशी दोनों हों।

जैसे-जैसे वेब विकसित हो रहा है, स्क्रॉल-संचालित एनिमेशन निस्संदेह इमर्सिव और आकर्षक वेब अनुभव बनाने के लिए एक तेजी से महत्वपूर्ण उपकरण बन जाएगा। इस तकनीक को अपनाएं और उन संभावनाओं का पता लगाएं जो यह वास्तव में मनोरंजक वेबसाइटों और वेब एप्लिकेशन बनाने के लिए प्रदान करता है।

आगे सीखने के संसाधन

• MDN वेब डॉक्स: animation-timeline
• Chrome Developers: CSS के साथ स्क्रॉल-संचालित एनिमेशन
• scroll-timeline पॉलीफिल