معرفی "قدرت انیمیشن های اسکرول محور را آزاد کنید»

براموس

ما مفتخریم که انتشار «قدرت انیمیشن‌های اسکرول‌مدار» را منتشر کنیم، یک دوره ویدیویی 10 قسمتی برای یادگیری همه چیز درباره انیمیشن‌های اسکرول با استفاده از CSS یا جاوا اسکریپت.

می توانید سریال را در یوتیوب تماشا کنید . قسمت اول در اینجا تعبیه شده است.

انیمیشن های اسکرول محور؟

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

انیمیشن های اسکرول محور در کروم از کروم 115 در دسترس هستند و کاندیدای مناسبی برای بهبود تدریجی هستند.

پشتیبانی مرورگر

  • کروم: 115.
  • لبه: 115.
  • فایرفاکس: پشت پرچم
  • سافاری: پشتیبانی نمی شود.

منبع

برای کسب اطلاعات بیشتر در مورد انیمیشن های اسکرول، مجموعه ویدیویی را تماشا کنید یا مستندات را بخوانید .

قسمت ها

این دوره شامل 10 قسمت است و به دو بخش بزرگ تقسیم می شود: توضیح مفاهیم اصلی که انیمیشن های اسکرول را تشکیل می دهند، به دنبال آن چند کاربرد عملی.

  1. اپیزود 1: مقدمه .
  2. قسمت 2: مفاهیم اصلی: scroll() و ScrollTimeline .
  3. قسمت 3: مفاهیم اصلی: view() و ViewTimeline .
  4. اپیزود 4: مفاهیم اصلی: گستره‌های جدول زمانی ابهام‌زدایی شده است .
  5. قسمت 5: مفاهیم اصلی: جستجوی تایم لاین و جدول زمانی نامگذاری شده .
  6. قسمت 6: کاربرد عملی: سایه های اسکرول را به یک ظرف پیمایش اضافه کنید .
  7. قسمت 7: کاربرد عملی: عناصر را در جهت های مختلف متحرک کنید .
  8. قسمت 8: کاربرد عملی: متحرک سازی مدل های سه بعدی و موارد دیگر در اسکرول .
  9. قسمت 9: کاربرد عملی: Scroll Velocity Detection .
  10. قسمت 10: Outro .

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

منابع بیشتر