صور متحركة مرتبطة بالتمرير باستخدام ScrollTimeline وViewTimeline | HTTP 203

يشارك "براموس" حماسه بشأن الصور المتحركة المرتبطة بالتمرير والمستندة إلى 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 - الخاتمة

المراجع:

مزيد من الفيديوهات في سلسلة HTTP 203 ← http://goo.gle/HTTP203

يمكنك الاشتراك في Google Chrome Developers هنا ← https://goo.gle/ChromeDevs.

إذا أعجبك هذا، قد يعجبك بودكاست HTTP203 ← https://goo.gle/HTTP203Podcast.

الرجوع إلى كل الحلقات