HTML Academy · पाठ

स्क्रॉल-लिंक्ड एनीमेशन की स्थापना

एलिमेंट के viewport में आने पर CSS एनीमेशन शुरू करें

पाठ 4, कुल 4 में से13 चरण

स्क्रॉल-लिंक्ड एनीमेशन की स्थापना, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

लक्ष्य

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

ट्रिगर-आधारित एनिमेशन

सबसे सरल तरीका यह है: जब कोई तत्व दृश्य क्षेत्र में प्रवेश करे, तो उसमें वह CSS क्लास जोड़ें जिसमें एनिमेशन मौजूद हो। ऑब्ज़र्वर कॉलबैक में entry.target.classList.add("in-view") चलाएँ; क्लास animation: fade-in 600ms forwards को परिभाषित करती है।

.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
  animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

ऑब्ज़र्वर की स्थापना

एक साझा ऑब्ज़र्वर बनाएँ, ट्रिगर क्लास वाले प्रत्येक तत्व को ऑब्ज़र्व करें, इंटरसेक्शन होने पर "दृश्य-में" जोड़ें और दोबारा ट्रिगर होने से बचने के लिए unobserve करें। एक-बार चलने वाले एनिमेशन के लिए इतना ही पर्याप्त है; दोबारा प्रवेश करने पर दोहराने के लिए unobserve न करें और बाहर निकलने पर क्लास हटा दें।

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add("in-view");
      observer.unobserve(entry.target);
    }
  }
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));

क्रमिक प्रभाव

किसी सूची को क्रमशः दिखाने के लिए CSS कस्टम प्रॉपर्टी के माध्यम से प्रत्येक आइटम पर अलग-अलग विलंब लागू करें: प्रत्येक आइटम पर style="--delay: ${i * 100}ms"; एनिमेशन animation-delay: var(--delay) को पढ़ता है। सूची के दृश्य क्षेत्र में आने पर आइटम क्रमिक रूप से एनिमेट होते हैं।

पहले ट्रिगर के लिए सीमा

threshold: 0.2 तब सक्रिय होता है जब तत्व का 20% दिखाई देता है — आम तौर पर "दृश्य-में" एनिमेशन के लिए यह अच्छा समय है। threshold: 0 बहुत जल्दी सक्रिय होता है (एक पिक्सेल दिखाई देते ही) और प्रभाव अचानक लगता है; threshold: 1 बहुत देर से सक्रिय होता है (पूरी तरह दिखाई देने पर) और विलंबित महसूस होता है।

स्क्रॉल-संबद्ध बनाम स्क्रॉल-ट्रिगरित

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

लेआउट में अनावश्यक बदलाव से बचना

ऐसे गुणों को एनिमेट करें जिन्हें GPU कम लागत में ट्रांसफ़ॉर्म कर सकता है: ट्रांसफ़ॉर्म और अपारदर्शिता। ऊपरी स्थिति, बाईं स्थिति, चौड़ाई और ऊँचाई को एनिमेट करने से बचें — वे हर फ़्रेम पर लेआउट को दोबारा सक्रिय करते हैं, जिससे मध्यम श्रेणी के उपकरणों पर स्क्रॉल-संबद्ध एनिमेशन अटकने लगते हैं।

कम गति का सम्मान करें

एनिमेशन घोषणाओं को @media (prefers-reduced-motion: no-preference) में रखें, ताकि कम गति का अनुरोध करने वाले उपयोगकर्ताओं (वेस्टिब्युलर विकार या संवेदनशीलता वाले उपयोगकर्ताओं) को बिना गति के स्थिर अंतिम स्थिति मिले। कम गति की स्थिति में सजावटी एनिमेशन पूरी तरह बंद कर देने चाहिए।

.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .fade-up { opacity: 0; transform: translateY(20px); }
  .fade-up.in-view { animation: fadeUp 600ms forwards; }
}

प्रदर्शन का तरीका

एक ही साझा ऑब्ज़र्वर का उपयोग करें, हर तत्व के लिए अलग ऑब्ज़र्वर का नहीं। एक-बार चलने वाला एनिमेशन सक्रिय हो जाने पर unobserve करें। will-change का संयम से उपयोग करें — केवल उन तत्वों पर जो उस समय एनिमेट हो रहे हों, और एनिमेशन समाप्त होने पर इसे हटा दें। छूटे हुए फ़्रेम देखने के लिए Performance पैनल पर नज़र रखें।

द्विदिश एनिमेशन

यदि तत्व के दृश्य क्षेत्र से बाहर जाने पर एनिमेशन उलट जाना चाहिए, तो unobserve न करें। कॉलबैक में isIntersecting के आधार पर क्लास को टॉगल करें: entry.target.classList.toggle("in-view", entry.isIntersecting)। प्रवेश करने पर एनिमेशन आगे चलता है और बाहर निकलने पर उलट जाता है।

Web Animations API के साथ संयोजन

JS-आधारित एनिमेशन के लिए classList.add को entry.target.animate(keyframes, options) से बदलें। WAAPI एक Animation ऑब्जेक्ट लौटाता है, जिसे आप रोक सकते हैं, उलट सकते हैं या प्रॉमिस के माध्यम से क्रमबद्ध कर सकते हैं — जटिल क्रमों के लिए यह CSS से अधिक लचीला है।

ज्ञान जाँच

स्क्रॉल-संबद्ध एनिमेशन में top/left/width/height को एनिमेट करने के बजाय transform और opacity को एनिमेट करना बेहतर क्यों माना जाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

स्क्रॉल-संबद्ध एनिमेशन IntersectionObserver को CSS एनिमेशन क्लास या WAAPI के साथ मिलाते हैं। एक छिपी हुई स्थिति निर्धारित करें, इंटरसेक्शन होने पर "दृश्य-में" जोड़ें, top/left के बजाय ट्रांसफ़ॉर्म और अपारदर्शिता को एनिमेट करें, कम गति की पसंद का सम्मान करें और क्रमिक रूप से दिखाई देने वाले प्रभावों के लिए CSS कस्टम प्रॉपर्टी से विलंब दें। पूर्ण स्क्रॉल-प्रगति वाले एनिमेशन के लिए मूल स्क्रॉल-चालित एनिमेशन पर विचार करें (एनीमेशन-टाइमलाइन: स्क्रॉल())।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “स्क्रॉल-लिंक्ड एनीमेशन की स्थापना” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्क्रॉल-लिंक्ड एनीमेशन की स्थापना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“स्क्रॉल-लिंक्ड एनीमेशन की स्थापना” में मैं क्या सीखूँगा?

एलिमेंट के viewport में आने पर CSS एनीमेशन शुरू करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“स्क्रॉल-लिंक्ड एनीमेशन की स्थापना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ