يشارك "براموس" حماسه بشأن الصور المتحركة المرتبطة بالتمرير والمستندة إلى HTML وCSS. تم أيضًا تضمين خيار JavaScript الذي يتكامل مع WAAPI.
الفصول:
- 00:00 - المقدمة
- 00:15 - مثال على مقدمة الفيديو التشويقي
- 03:41 - الصور المتحركة المرتبطة بالتمرير مقابل الصور المتحركة التي تظهر عند النقر
- 05:18 - مثال أساسي على استخدام لغة CSS (المخطط الزمني للمستند، والمخطط الزمني للتقدم للتمرير، والتمرير()، والمخطط الزمني للرسوم المتحركة)
- 12:31 - مثال أساسي باستخدام JavaScript (ScrollTimeline)
- 14:06 - المخططات الزمنية المسماة لمستوى تقدُّم عملية التمرير (الانتقال-اسم المخطط الزمني، محور المخطط الزمني للتمرير)
- 20:31 - تمرير الإطارات الزمنية لمستوى التقدّم
- 25:05 - عناصر التتبع عند دخولها أو خروجها باستخدام JavaScript (ViewTimeline)
- 31:09 - عناصر التتبع عند دخول/خروجها باستخدام CSS (view-timeline-name, view-time-axis)
- 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
- عرض الصورة عند الدخول إلى العرض التوضيحي (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
- غطاء اختلاف المنظر إلى عنوان ثابت، مزيف (JS+WAAPI) ← https://goo.gle/3SKoMCR
عرض توضيحي لميزة تجميع البطاقات (JS+WAAPI) ← https://goo.gle/3VW0wjD
مجموعة مع كل العروض التوضيحية لخدمة مقارنة الأسعار → https://goo.gle/3F9ScqF
مجموعة تتضمّن كل عروض JS+WAAPI التجريبية ← https://goo.gle/3F9ScXH
مواصفات الصور المتحركة المرتبطة بالتمرير ← https://goo.gle/3F9SduJ
تعبئة Polyfill المرتبطة بالتمرير ← https://goo.gle/3SyziN8
مشكلة مجموعة خدمات مقارنة الأسعار (CSS) "Bring back-Offsets"← https://goo.gle/3SxfE4d
document.timeline ← https://goo.gle/3SwNF4u
مزيد من الفيديوهات في سلسلة HTTP 203 ← http://goo.gle/HTTP203
يمكنك الاشتراك في Google Chrome Developers هنا ← https://goo.gle/ChromeDevs.
إذا أعجبك هذا، قد يعجبك بودكاست HTTP203 ← https://goo.gle/HTTP203Podcast.