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

براموس

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

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

انیمیشن‌های اسکرول-رانده؟

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

انیمیشن‌های اسکرول‌محور از نسخه ۱۱۵ کروم در دسترس هستند و کاندیدای مناسبی برای بهبود تدریجی هستند.

Browser Support

  • کروم: ۱۱۵.
  • لبه: ۱۱۵.
  • پیش‌نمایش فناوری فایرفاکس: پشتیبانی می‌شود.
  • سافاری: ۲۶.

Source

برای کسب اطلاعات بیشتر در مورد انیمیشن‌های اسکرول-محور، سری ویدیوها را تماشا کنید یا مستندات را مطالعه کنید .

قسمت‌ها

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

  1. فصل اول: مقدمه .
  2. قسمت ۲: مفاهیم اصلی: scroll() و ScrollTimeline .
  3. قسمت ۳: مفاهیم اصلی: view() و ViewTimeline .
  4. قسمت ۴: مفاهیم اصلی: محدوده‌های جدول زمانی رمزگشایی می‌شوند .
  5. قسمت ۵: مفاهیم اصلی: جستجوی جدول زمانی و جدول‌های زمانی نامگذاری شده .
  6. قسمت ۶: کاربرد عملی: اضافه کردن سایه‌های اسکرول به یک ظرف اسکرول
  7. قسمت ۷: کاربرد عملی: متحرک‌سازی عناصر در جهات مختلف .
  8. قسمت ۸: کاربرد عملی: متحرک‌سازی مدل‌های سه‌بعدی و موارد دیگر در اسکرول
  9. قسمت ۹: کاربرد عملی: تشخیص سرعت اسکرول .
  10. قسمت ۱۰: پایان .

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

منابع بیشتر