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

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

Bramus

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

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

क्या आपको स्क्रोल करने पर चलने वाले ऐनिमेशन चाहिए?

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

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

Browser Support

Source

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

एपिसोड

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

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

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

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