ब्रैमूस, Scroll-Linked Animations के बारे में अपना उत्साह शेयर कर रहे हैं. ये सिर्फ़ एचटीएमएल और सीएसएस से चलाए जाते हैं. WAAPI के साथ इंटिग्रेट होने वाले JavaScript विकल्प को भी शामिल किया गया है!
चैप्टर:
- 00:00 - प्रस्तावना
- 00:15 - परिचय और टीज़र का उदाहरण
- 03:41 - स्क्रोल करके लिंक किए गए ऐनिमेशन बनाम स्क्रोल से ट्रिगर होने वाले ऐनिमेशन
- 05:18 - सीएसएस का इस्तेमाल करने का बुनियादी उदाहरण (दस्तावेज़ की टाइमलाइन, स्क्रोल प्रोग्रेस टाइमलाइन, स्क्रोल(), ऐनिमेशन-टाइमलाइन)
- 12:31 - JavaScript का इस्तेमाल करने वाला सामान्य उदाहरण (ScrollTimeline)
- 14:06 - नाम वाली स्क्रोल प्रोग्रेस टाइमलाइन (scroll-timeline-name, Scroll-timeline-ऐक्सिस)
- 20:31 - स्क्रोल प्रोग्रेस की टाइमलाइन के ऑफ़सेट
- 25:05 - JavaScript का उपयोग करके पैरामीटर में प्रवेश करने/बाहर निकलने पर उन्हें ट्रैक करना (ViewTimeline)
- 31:09 - CSS (view-timeline-name, view-timeline-ऐक्सिस) का इस्तेमाल करके, एलिमेंट को शामिल करना या उससे बाहर निकलते समय
- 32:02 - प्रोग्रेस की टाइमलाइन इनसेट देखें
- 33:07 - प्रोग्रेस की टाइमलाइन के उदाहरण देखें (कवर फ़्लो, संपर्क सूची फ़्लाय-इन/फ़्लाई-आउट, स्टैकिंग कार्ड)
- 35:40 - इसके साथ आज ही खेलें!
- 38:04 - उपसंहार
संसाधन:
- कवर फ़्लो डेमो (सीएसएस) → https://goo.gle/3SvEQbd
- कवर फ़्लो डेमो (JS+WAAPI) → https://goo.gle/3F9S62h
- स्क्रोल प्रोग्रेस डेमो (सीएसएस) → https://goo.gle/3F9S6zj
- स्क्रोल प्रोग्रेस डेमो (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Enter डेमो (सीएसएस) पर इमेज रिवील → https://goo.gle/3F9S8XX
- Enter डेमो (JS+WAAPI) पर इमेज रिवील → https://goo.gle/3Sto8JK
- फ़्लाई-इन + फ़्लाई-आउट इफ़ेक्ट डेमो (सीएसएस) की सूची →https://goo.gle/3Svg3UE
- फ़्लाई-इन + फ़्लाई-आउट इफ़ेक्ट डेमो (JS+WAAPI) → https://goo.gle/3F9Saix
- हॉरिज़ॉन्टल स्क्रोल सेक्शन डेमो (सीएसएस) → https://goo.gle/3SpaDe5
- हॉरिज़ॉन्टल स्क्रोल सेक्शन डेमो (JS+WAAPI) → https://goo.gle/3SAbcBz
- स्टिकी हेडर का पैरालैक्स कवर, नकली किया गया (JS+WAAPI) → https://goo.gle/3SKoMCR
स्टैकिंग कार्ड डेमो (JS+WAAPI) → https://goo.gle/3VW0wjD
सीएसएस के सभी डेमो वाला कलेक्शन → https://goo.gle/3F9ScqF
JS+WAAPI के सभी डेमो वाला कलेक्शन → https://goo.gle/3F9ScXH
स्क्रोल-लिंक किए गए ऐनिमेशन की जानकारी → https://goo.gle/3F9SduJ
स्क्रोल-लिंक किए गए ऐनिमेशन Polyfill → https://goo.gle/3SyziN8
सीएसएस WG समस्या “Bring back Scroll-offsets”→ https://goo.gle/3SxfE4d
दस्तावेज़.timeline → https://goo.gle/3SwNF4u
HTTP 203 सीरीज़ के ज़्यादा वीडियो → http://goo.gle/HTTP203
Google Chrome Developers की सदस्यता यहां लें → https://goo.gle/ChromeDevs
अगर आपको यह अच्छा लगा, तो आपको HTTP203 पॉडकास्ट → https://goo.gle/HTTP203Podcast पसंद आ सकते हैं