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

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

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

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

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

स्क्रोल करके चलने वाले ऐनिमेशन, Chrome में Chrome 115 में उपलब्ध हैं. इन्हें लगातार बेहतर बनाने की ज़रूरत है.

ब्राउज़र सहायता

  • 115
  • 115
  • x

सोर्स

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

एपिसोड

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

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

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

कई और संसाधन