ברמוס משתף את ההתלהבות שלו מהאנימציות המקושרות לגלילה שמופעלות על ידי דבר מלבד HTML ו-CSS. נוספה גם אפשרות JavaScript המשולבת עם WAAPI.
פרקים:
- 00:00 - פרולוג
- 00:15 - מבוא + דוגמה לטיזר
- 03:41 - אנימציות עם קישור לגלילה לעומת אנימציות שמופעלות על ידי גלילה
- 05:18 – דוגמה בסיסית לשימוש ב-CSS (ציר הזמן של המסמך, ציר הזמן של תהליך הגלילה, Scroll(), קו זמן אנימציה)
- 12:31 - דוגמה בסיסית לשימוש ב-JavaScript (ScrollTimeline)
- 14:06 - צירי זמן להתקדמות הגלילה בעלי שם (גלילה-שם ציר הזמן, ציר הזמן של הגלילה)
- 20:31 - היסט התקדמות הגלילה בצירי הזמן
- 25:05 - רכיבי מעקב כשהם נכנסים או יוצאים באמצעות JavaScript (ViewTimeline)
- 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
- הצגת תמונות בהדגמה של Enter (CSS) ← https://goo.gle/3F9S8XX
- הצגת תמונה בתצוגה הדגמה (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 לכותרת דביקה, מזויף (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 "Bring back Scroll-Offsets" ← 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