इस पेज का अनुवाद Cloud Translation API से किया गया है.

पेश है "स्क्रोल-आधारित ऐनिमेशन की ताकत का इस्तेमाल करें"

Bramus

हमें यह बताते हुए खुशी हो रही है कि हमने "स्क्रोल करने पर दिखने वाले ऐनिमेशन की ताकत को अनलॉक करें" नाम से एक वीडियो कोर्स लॉन्च किया है. इसमें 10 वीडियो हैं. इनकी मदद से, सीएसएस या JavaScript का इस्तेमाल करके, स्क्रोल करने पर दिखने वाले ऐनिमेशन के बारे में पूरी जानकारी पाई जा सकती है.

YouTube पर यह सीरीज़ देखी जा सकती है. पहले एपिसोड को यहां एम्बेड किया गया है.

क्या स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल किया जा सकता है?

स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, मौजूदा सीएसएस या WAAPI ऐनिमेशन को स्क्रोल करने पर ऐनिमेट किया जा सकता है. इस वजह से, स्क्रोल-ड्राइव ऐनिमेशन को इन एपीआई के सभी फ़ायदे मिलते हैं. इसमें हार्डवेयर की मदद से तेज़ी से रेंडर होने वाले स्क्रोल-ड्राइव ऐनिमेशन शामिल हैं. मुख्य थ्रेड ब्लॉक होने पर, ये ऐनिमेशन रुकते नहीं हैं.

स्क्रोल करने पर दिखने वाले ऐनिमेशन, Chrome 115 से Chrome में उपलब्ध हैं. ये प्रोग्रेसिव एन्हांसमेंट के लिए सबसे सही विकल्प हैं.

Browser Support

Source

स्क्रोल-ड्रिवन ऐनिमेशन के बारे में ज़्यादा जानने के लिए, वीडियो सीरीज़ देखें या दस्तावेज़ पढ़ें.

एपिसोड

इस कोर्स में 10 एपिसोड हैं. इसे दो मुख्य हिस्सों में बांटा गया है: पहले हिस्से में, स्क्रोल-ड्राइव ऐनिमेशन बनाने वाले मुख्य कॉन्सेप्ट के बारे में बताया गया है. इसके बाद, कुछ व्यावहारिक उदाहरण दिए गए हैं.

इन एपिसोड को क्रम से देखना सबसे अच्छा होता है, क्योंकि इनमें पहले एपिसोड में बताई गई तकनीकों और डेमो के बारे में ज़्यादा जानकारी दी गई है. हर एपिसोड में दिखाए गए डेमो और टूल, ऑनलाइन उपलब्ध हैं. साथ ही, इन्हें ब्यौरे में लिंक किया गया है.

ज़्यादा रिसॉर्स

दस्तावेज़: स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, स्क्रोल करने पर एलिमेंट को ऐनिमेट करना
डेमो और टूल: scroll-driven-animations.style
DevTools Debugger एक्सटेंशन पाना