انیمیشن‌های وب مدرن

آنچه یاد خواهید گرفت:

• آشنایی با انیمیشن‌ها و تبدیل‌های CSS
• آشنایی با Web Animations API جدید جاوااسکریپت
• کشف انیمیشن‌های اسکرول محور به تفصیل
• ایجاد ترنزیشن‌های صفحه چشم‌گیر با View Transitions API

پیش‌نیازهای دوره

• دانش اولیه از HTML ،CSS و جاوااسکریپت نیاز است.

توضیحات دوره

به انیمیشن‌های وب مدرن، یک بررسی عمیق درباره تکنیک‌های انیمیشن مدرن با بدون کتابخانه، فقط با استفاده از APIs مرورگر، خوش آمدید.

انیمیشن‌ها و ترنزیشن‌های CSS مدت‌ها است که وجود دارند. اما به تازگی APIs جدیدی به مرورگرهای مدرن معرفی شدند تا انیمیشن‌سازی در وب را بهبود ببخشند و کنترل بیشتری به توسعه‌دهندگان بدهند.

در میان این افزونه‌های جدید، Web Animations API (WAAPI) وجود دارد. این API قدرت موتور انیمیشن مرورگر را برای توسعه‌دهندگان باز می‌کند. به ما اجازه می‌دهد تا انیمیشن‌ها را بسازیم و کنترل پلی‌بک آنها را با جاوااسکریپت انجام دهیم. این یکی از کارآمدترین روش‌ها برای انیمیشن‌سازی در وب است.

علاوه بر آن، ویژگی‌های جدیدی به انیمیشن‌های CSS اضافه شده که به ما اجازه می‌دهد انیمیشن‌ها را در زمان اسکرول کاربران تحت کنترل بگیریم. با افزودن ویژگی‌های جدید مانند animation-timeline و scroll-timeline و view-timeline، اکنون می‌توانیم انیمیشن‌هایی بسازیم که نه بر اساس زمان، بلکه بر اساس پیشرفت اسکرول یا بر اساس دیده شدن عناصر خاص در viewport باشد. این موضوع بدون نیاز به بارگذاری هیچ کتابخانه خارجی، دروازه‌ای به سمت ایجاد انیمیشن‌های اسکرول محور چشم‌گیر باز می‌کند.

افزونه جدید دیگر به مرورگرهای مدرن، معرفی View Transitions API است. این API به ما اجازه می‌دهد به راحتی ترنزیشن‌های انیمیشنی بین states مختلف DOM ایجاد کنیم. این امر می‌تواند به خصوص در اپلیکیشن‌های تک صفحه‌ای (SPAs) مفید باشد زمانی که نیاز داریم هنگام ناوبری بین مسیرهای مختلف انیمیشن داشته باشیم. قبل از معرفی View Transitions API، این نوع انیمیشن‌ها بسیار پیچیده بودند.

در این دوره، ما تمام این مباحث را به تفصیل پوشش خواهیم داد. نه تنها این، بلکه ما همچنین یک بخش درباره انیمیشن‌ها و ترنزیشن‌های قدیمی CSS خواهیم داشت و هر جنبه‌ از آنها را به عمق بررسی خواهیم کرد. ما همچنین مثال‌ها و تمرینات عملی برای هر موضوع بحث‌ شده خواهیم داشت.

پس اگر می‌خواهید وبسایت‌های خود را جان‌بخشی کنید، هم‌اکنون به ما بپیوندید.

این دوره برای چه کسانی مناسب است؟

• توسعه‌دهندگان وب که به دنبال یادگیری همه مطالب درباره انیمیشن‌سازی در مرورگر هستند.
• توسعه‌دهندگان وب که به دنبال یادگیری APIs انیمیشن جدید مانند Web Animations API، انیمیشن‌های اسکرول محور و View Transitions API هستند.