براموس هیجان خود را برای انیمیشن های Scroll-Linked که توسط هیچ چیزی به جز HTML و CSS ارائه نمی شوند، به اشتراک می گذارد. گزینه جاوا اسکریپت که با WAAPI ادغام می شود نیز گنجانده شده است!
فصل ها:
- 00:00 - پیش درآمد
- 00:15 - معرفی + نمونه تیزر
- 03:41 - انیمیشن‌های مرتبط با پیمایش در مقابل انیمیشن‌های پیمایش‌شده
- 05:18 - مثال اولیه با استفاده از CSS (خط زمانی سند، جدول زمانی پیشرفت پیمایش، اسکرول()، انیمیشن-زمان خط)
- 12:31 - مثال پایه با استفاده از جاوا اسکریپت (ScrollTimeline)
- 14:06 - خطوط زمانی پیشرفت پیمایش نامگذاری شده (اسکرول-زمان-لاین-نام، اسکرول-خط زمان-محور)
- 20:31 - پیمایش جابه‌جایی‌های جدول زمانی پیشرفت
- 25:05 - ردیابی عناصر هنگام ورود/خروج با جاوا اسکریپت (ViewTimeline)
- 31:09 - ردیابی عناصر در هنگام ورود/خروج با استفاده از CSS (نمای-زمان-نام، نمای-زمان-محور)
- 32:02 - نمایش جدول زمانی پیشرفت
- 33:07 - مشاهده نمونه‌های جدول زمانی پیشرفت (جریان پوشش، فهرست مخاطبین پرواز به داخل/فرار خارج، کارت‌های انباشته)
- 35:40 - امروز با آن بازی کنید!
- 38:04 - پایان
منابع:
- نسخه نمایشی جریان جلد (CSS) → https://goo.gle/3SvEQbd
- نسخه نمایشی Cover Flow (JS+WAAPI) → https://goo.gle/3F9S62h
- پیمایش نسخه نمایشی پیشرفت (CSS) → https://goo.gle/3F9S6zj
- پیمایش نسخه نمایشی پیشرفت (JS+WAAPI) → https://goo.gle/3Sq5nXn
- نمایش تصویر در Enter Demo (CSS) → https://goo.gle/3F9S8XX
- نمایش تصویر در Enter Demo (JS+WAAPI) → https://goo.gle/3Sto8JK
- فهرست نمایش جلوه‌های پروازی + پرواز بیرونی (CSS) → https://goo.gle/3Svg3UE
- فهرست نمایش جلوه‌های پروازی + پرواز خروجی (JS+WAAPI) → https://goo.gle/3F9Saix
- نسخه نمایشی بخش اسکرول افقی (CSS) → https://goo.gle/3SpaDe5
- نسخه نمایشی بخش اسکرول افقی (JS+WAAPI) → https://goo.gle/3SAbcBz
- جلد Parallax به Sticky Header، جعلی (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
انیمیشن‌های مرتبط با پیمایش Polyfill → https://goo.gle/3SyziN8
شماره CSS WG "بازگرداندن Scroll-Offsets" → https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
ویدیوهای بیشتر در سری HTTP 203 → http://goo.gle/HTTP203
در اینجا → https://goo.gle/ChromeDevs در Google Chrome Developers مشترک شوید
همچنین، اگر از این کار لذت بردید، ممکن است پادکست HTTP203 را دوست داشته باشید → https://goo.gle/HTTP203Podcast