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

Bramus

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

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

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

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

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

एपिसोड

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

  1. पहला एपिसोड: परिचय.
  2. दूसरा एपिसोड: मुख्य सिद्धांत: scroll() और ScrollTimeline.
  3. तीसरा एपिसोड: मुख्य सिद्धांत: view() और ViewTimeline.
  4. चौथा एपिसोड: मुख्य सिद्धांत: टाइमलाइन रेंज के बारे में जानकारी.
  5. पांचवां एपिसोड: मुख्य सिद्धांत: टाइमलाइन लुकअप और नेमड टाइमलाइन.
  6. छठा एपिसोड: व्यावहारिक उदाहरण: स्क्रोल कंटेनर में स्क्रोल शैडो जोड़ना.
  7. सातवां एपिसोड: व्यावहारिक उदाहरण: एलिमेंट को अलग-अलग दिशाओं में ऐनिमेट करना.
  8. आठवां एपिसोड: व्यावहारिक उदाहरण: स्क्रोल करने पर 3D मॉडल और अन्य एलिमेंट को ऐनिमेट करना.
  9. नौवां एपिसोड: व्यावहारिक उदाहरण: स्क्रोल की स्पीड का पता लगाना.
  10. दसवां एपिसोड: आउटरो.

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

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