تمرينو الإضافة Scroll Trigger

المقدمة

• نظرة عامة على إضافة Scroll Trigger الجديدة لـ GSAP.
• عرض للقدرات من خلال أمثلة مختلفة.

الميزات الرئيسية والأمثلة

1. تثبيت العناصر

• عند تمرير الصفحة للأسفل، يمكن تثبيت الأقسام.
• يحدث فك التثبيت عند التمرير للأعلى أو عند الوصول إلى النهاية.

2. لوحات تنزلق

• يمكن للوحات أن تنزلق من اتجاهات مختلفة أثناء التمرير.

3. تتبع سرعة التمرير

• سرعة التمرير مرتبطة بالميلان للصور.
• التفاعل مع قفز التمرير CSS للحصول على تجربة سلسة.

4. تأثير المنظر

• صور الخلفية تمرر بمعدلات مختلفة عن عناصر المقدمة.

5. التمرير الأفقي المتقدم

• إنشاء تأثير التمرير الأفقي من خلال التفاعل مع التمرير العمودي.
• يمكن أن تظهر العناصر كأنها تمرر أفقيا بناءً على التمرير للأسفل.

المشاكل الشائعة التي يحلها Scroll Trigger

• مشاكل اكتمال الرسوم المتحركة عند التمرير قبل بدء الرسوم المتحركة.
• يُفعل الإضافة لتحفيز الرسوم المتحركة عند دخول العناصر إلى نافذة العرض.

إعدادات إجراءات التبديل

• toggleActions تسمح بالتحكم في الرسوم المتحركة عند الدخول/الخروج من نافذة العرض.
  • الخيارات: play, pause, resume, reverse, restart, reset, complete, none.
• أمثلة على تنفيذات toggleActions مثل إعادة تشغيل واستئناف الرسوم المتحركة بناءً على التمرير.

تحديد مواضع مشغلات التمرير

• ضبط خصائص البداية والنهاية لمشغلات التمرير.
• توثيق حول كيفية وضع علامات مرئية لتمثيل مشغلات التمرير.
• استخدام الكلمات الرئيسية، القيم بالبكسل، أو النسب المئوية لتحديد نقاط البداية والنهاية.

الرسوم المتحركة التحكمية

• خاصية scrub تسمح لموقف التمرير بالتحكم في توقيت الرسوم المتحركة.
• خيارات للالتحاق بالرسوم المتحركة بسلاسة بمرور الوقت.

سلوك التثبيت والتباعد

• تثبيت العناصر أثناء التمرير وإدارة التباعد.
• إضافة ديناميكية لحشو في أسفل العناصر المثبتة.

تقنيات متقدمة

• إنشاء لوحات جنبًا إلى جنب تمرر عموديًا.
• تنفيذ سلوكيات القفز للانتقالات السلسة بين الأقسام.

التراجع واستدعاء الوظائف المخصصة

• استخدام onEnter, onLeave, onUpdate, و onToggle لأغراض السلوك المخصص.
• القدرة على تبديل الفئات وإدارة الحالة من خلال هذه الاستدعاءات.

الإعدادات الافتراضية والتخصيص

• ضبط الخصائص الافتراضية لعدة مشغلات تمرير.
• تهيئة مشغلات التمرير للحاويات المخصصة والتمرير الأفقي.

الخاتمة

• التشجيع على استكشاف إمكانيات إضافة Scroll Trigger مع GSAP.
• الموارد المتوفرة عبر منتديات GreenSock لأسئلة إضافية.