स्क्रॉल से शुरू होने वाले ऐनिमेशन
तत्वों के दृश्य में आने पर उन्हें ऐनिमेट कीजिए।
स्क्रॉल से शुरू होने वाले ऐनिमेशन, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्क्रॉल पर ऐनिमेशन
एक लोकप्रिय प्रभाव यह है कि उपयोगकर्ता के किसी तत्व तक स्क्रॉल करने पर वह धीरे-धीरे दिखाई दे या स्लाइड होकर दृश्य में आए। इंटरसेक्शन ऑब्ज़र्वर इसे व्यवस्थित बनाता है: तत्व के व्यूपोर्ट में आने पर एक CSS वर्ग जोड़ें और ऐनिमेशन का काम CSS को करने दें।
CSS का भाग
CSS में छिपी हुई शुरुआती स्थिति और दिखाई देने वाली अंतिम स्थिति तय करें। JavaScript केवल एक वर्ग को बदलता है; ट्रांज़िशन पूरी तरह CSS में होता है, जिससे यह सहज बना रहता है।
// .reveal { opacity: 0; transform: translateY(20px);
// transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }लक्ष्य चुनना
जिन तत्वों को ऐनिमेट करना है, उन पर एक साझा वर्ग लगाएँ, फिर उन्हें एकत्र करें।
const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');ऑब्ज़र्वर बनाना
ऐसा threshold उपयोग करें जिससे ऐनिमेशन तब शुरू हो जब तत्व का पर्याप्त भाग दिखाई दे, केवल एक पिक्सेल दिखाई देने पर नहीं।
const observer = new IntersectionObserver(reveal, {
threshold: 0.2 // 20% visible
});वर्ग जोड़ना
कॉलबैक में इंटरसेक्ट होने वाले लक्ष्यों पर visible वर्ग जोड़ें। इसके बाद CSS उन्हें ऐनिमेशन के साथ दृश्य में लाता है।
function reveal(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}एक बार ऐनिमेट करना
केवल एक बार दिखाने के लिए वर्ग जोड़ने के बाद तत्व की निगरानी रोक दें, ताकि स्क्रॉल करके दूर जाने और वापस आने पर वह फिर से ऐनिमेट न हो।
function reveal(entries, obs) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
obs.unobserve(entry.target); // animate only once
}
});
}दोनों दिशाओं में फिर से ऐनिमेट करना
यदि आप चाहते हैं कि तत्व दृश्य से बाहर जाते समय भी ऐनिमेट हों, तो isIntersecting के आधार पर वर्ग बदलें और निगरानी जारी रखें।
function reveal(entries) {
entries.forEach(entry => {
entry.target.classList.toggle('visible', entry.isIntersecting);
});
}निगरानी शुरू करना
ट्रैकिंग शुरू करने के लिए हर लक्ष्य की निगरानी करें। उपयोगकर्ता के हर लक्ष्य के पास से स्क्रॉल करने पर observer सक्रिय होता है।
items.forEach(el => observer.observe(el));ऐनिमेशन में क्रमिक विलंब
क्रमिक विलंब लागू करके एक क्रमिक प्रभाव बनाएँ। आप इसे किसी data विशेषता या तत्व के इंडेक्स से सेट कर सकते हैं।
items.forEach((el, i) => {
el.style.transitionDelay = (i * 100) + 'ms';
observer.observe(el);
});कम गति का सम्मान करना
कुछ उपयोगकर्ता कम गति वाला दृश्य प्रभाव पसंद करते हैं। मीडिया क्वेरी जाँचें और उनके लिए ऐनिमेशन छोड़कर सामग्री तुरंत दिखाएँ।
const reduce = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
items.forEach(el => el.classList.add('visible'));
}प्रदर्शन में लाभ
भारी काम CSS ट्रांज़िशन करते हैं और दृश्यता का पता लगाने का काम ब्राउज़र को सौंपा गया है, इसलिए बहुत सारे तत्वों के साथ भी स्क्रॉल ऐनिमेशन सहज रहते हैं। न स्क्रॉल-घटना की गणना, न रुकावट।
त्वरित जाँच
स्क्रॉल से सक्रिय होने वाले ऐनिमेशन के बारे में अपनी समझ जाँचें।
पुनरावलोकन
आपने स्क्रॉल से सक्रिय होने वाले ऐनिमेशन बनाए:
- CSS में छिपी हुई और दिखाई देने वाली स्थितियाँ तय करें।
- उचित
thresholdके साथ लक्ष्यों की निगरानी करें। - इंटरसेक्शन पर एक वर्ग बदलें; ऐनिमेशन CSS करता है।
- केवल एक बार दिखाने के लिए
unobserveका उपयोग करें। prefers-reduced-motionका सम्मान करें।
आपने इंटरसेक्शन ऑब्ज़र्वर पूरा कर लिया। अब Web Workers सीखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “स्क्रॉल से शुरू होने वाले ऐनिमेशन” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्क्रॉल से शुरू होने वाले ऐनिमेशन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“स्क्रॉल से शुरू होने वाले ऐनिमेशन” में मैं क्या सीखूँगा?
तत्वों के दृश्य में आने पर उन्हें ऐनिमेट कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“स्क्रॉल से शुरू होने वाले ऐनिमेशन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- तत्व की दृश्यता देखना
- इमेज का लेज़ी लोडिंग
- अनंत स्क्रॉलिंग
- स्क्रॉल से शुरू होने वाले ऐनिमेशन