ব্রামাস স্ক্রোল-লিঙ্কড অ্যানিমেশনগুলির জন্য তার উত্তেজনা শেয়ার করে যা HTML এবং CSS ছাড়া আর কিছুই দ্বারা চালিত নয়। জাভাস্ক্রিপ্ট বিকল্প যা WAAPI এর সাথে একীভূত হয় তাও অন্তর্ভুক্ত!
অধ্যায়:
- 00:00 - প্রস্তাবনা
- 00:15 - ভূমিকা + টিজার উদাহরণ
- 03:41 - স্ক্রোল-লিঙ্কড বনাম স্ক্রোল-ট্রিগারড অ্যানিমেশন
- 05:18 - CSS ব্যবহার করে প্রাথমিক উদাহরণ (ডকুমেন্ট টাইমলাইন, স্ক্রোল প্রোগ্রেস টাইমলাইন, স্ক্রোল(), অ্যানিমেশন-টাইমলাইন)
- 12:31 - জাভাস্ক্রিপ্ট ব্যবহার করে প্রাথমিক উদাহরণ (স্ক্রোলটাইমলাইন)
- 14:06 - নামযুক্ত স্ক্রোল অগ্রগতির সময়রেখা (স্ক্রোল-টাইমলাইন-নাম, স্ক্রোল-টাইমলাইন-অক্ষ)
- 20:31 - স্ক্রোল অগ্রগতি টাইমলাইন অফসেট
- 25:05 - ট্র্যাকিং উপাদানগুলি জাভাস্ক্রিপ্ট ব্যবহার করে প্রবেশ/প্রস্থান করার সময় (ভিউটাইমলাইন)
- 31:09 - ট্র্যাকিং উপাদানগুলি যখন CSS ব্যবহার করে প্রবেশ/প্রস্থান করে (ভিউ-টাইমলাইন-নাম, ভিউ-টাইমলাইন-অক্ষ)
- 32:02 - অগ্রগতি টাইমলাইন ইনসেট দেখুন
- 33:07 - অগ্রগতির সময়রেখার উদাহরণ দেখুন (কভার ফ্লো, যোগাযোগের তালিকা ফ্লাই-ইন/ফ্লাই-আউট, স্ট্যাকিং কার্ড)
- 35:40 - আজ এটির সাথে খেলুন!
- 38:04 - উপসংহার
সম্পদ:
- কভার ফ্লো ডেমো (CSS) → https://goo.gle/3SvEQbd
- কভার ফ্লো ডেমো (JS+WAAPI) → https://goo.gle/3F9S62h
- স্ক্রোল প্রোগ্রেস ডেমো (CSS) → https://goo.gle/3F9S6zj
- স্ক্রোল প্রোগ্রেস ডেমো (JS+WAAPI) → https://goo.gle/3Sq5nXn
- এন্টার ডেমো (সিএসএস) → https://goo.gle/3F9S8XX এ চিত্র প্রকাশ
- এন্টার ডেমো (JS+WAAPI) → https://goo.gle/3Sto8JK- এ চিত্র প্রকাশ
- তালিকা ফ্লাই-ইন + ফ্লাই-আউট ইফেক্ট ডেমো (সিএসএস) → https://goo.gle/3Svg3UE
- তালিকা ফ্লাই-ইন + ফ্লাই-আউট ইফেক্ট ডেমো (JS+WAAPI) → https://goo.gle/3F9Saix
- অনুভূমিক স্ক্রোল বিভাগের ডেমো (CSS) → https://goo.gle/3SpaDe5
- অনুভূমিক স্ক্রোল বিভাগের ডেমো (JS+WAAPI) → https://goo.gle/3SAbcBz
- প্যারালাক্স কভার টু স্টিকি হেডার, নকল (JS+WAAPI) → https://goo.gle/3SKoMCR
স্ট্যাকিং কার্ড ডেমো (JS+WAAPI) → https://goo.gle/3VW0wjD
সমস্ত CSS ডেমো সহ সংগ্রহ → https://goo.gle/3F9ScqF
সমস্ত JS+WAAPI ডেমো সহ সংগ্রহ → https://goo.gle/3F9ScXH
স্ক্রোল-লিঙ্ক করা অ্যানিমেশন স্পেসিফিকেশন → https://goo.gle/3F9SduJ
স্ক্রোল-লিঙ্ক করা অ্যানিমেশন পলিফিল → https://goo.gle/3SyziN8
CSS WG ইস্যু "স্ক্রোল-অফসেটগুলি ফিরিয়ে আনুন"→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
HTTP 203 সিরিজের আরও ভিডিও → http://goo.gle/HTTP203 ৷
এখানে Google Chrome বিকাশকারীদের সদস্যতা নিন → https://goo.gle/ChromeDevs ৷
এছাড়াও, আপনি যদি এটি উপভোগ করেন তবে আপনি HTTP203 পডকাস্ট → https://goo.gle/HTTP203Podcast পছন্দ করতে পারেন