ميزات وتطبيقات Scroll Trigger في GSAP

Aug 22, 2024

تمرينو الإضافة 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 لأسئلة إضافية.