مقدمة

؟ مرحبًا بالمطورين!

مرحبًا بكم في اليوم السابع من رحلة GSAP، حيث أستكشف الإمكانيات اللانهائية للرسوم المتحركة على الويب. اليوم، قبلت التحدي المتمثل في إنشاء رسوم متحركة تفاعلية قائمة على التمرير تتميز بنص ديناميكي وأسهم دوارة.

باستخدام أدوات الرسوم المتحركة القوية في GSAP، سنجعل الصفحة تستجيب لاتجاه تمرير المستخدم - لأعلى أو لأسفل - مع حركة وتدوير سلسين. دعونا نتعمق!

ماذا نبني؟️

ستتضمن الرسوم المتحركة لدينا ما يلي:

• شريط تمرير من النصوص والصور.
• الرسوم المتحركة المستجيبة التي يتم ضبطها بناءً على اتجاه التمرير .
• أسهم دوارة لإضافة لمسة جمالية!

يمكنك مشاهدة العرض التجريبي المباشر هنا.

هيكل HTML

إليك ترميز HTML البسيط الذي استخدمته:

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});








  
  
  كيف يعمل ⚙️




مستمع الأحداث: يكتشف window.addEventListener("wheel") اتجاه التمرير.


الرسوم المتحركة GSAP:



يقوم gsap.to() بنقل الشاشة الاسمية في اتجاه محدد.

 يضيف دوران الأسهم إحساسًا ديناميكيًا وتفاعليًا.




التمرير اللانهائي: استخدام التكرار: -1 يضمن استمرار شريط التحديد في التكرار إلى ما لا نهاية.







  
  
  التحديات والتعلم


؟ التحدي: كانت مزامنة اتجاه التمرير مع حركة الشاشة الاسمية أمرًا صعبًا.


؟ الحل: واجهة برمجة التطبيقات القوية لـ GSAP جعلت من السهل ضبط الرسوم المتحركة بخصائص مثل التكرار والسهولة والمدة.  





  
  
  الأفكار النهائية


 أظهر هذا المشروع كيف يمكن لـ GSAP التعامل مع  التفاعلات القائمة على التمرير  وإضفاء الحيوية على صفحات الويب. سواء كنت تعمل على ملف شخصي أو موقع ويب إبداعي، فإن GSAP هي الأداة المثالية لجعل الرسوم المتحركة جذابة وبديهية.  

؟ جربه بنفسك وشارك إبداعاتك! 





  
  
  موارد




توثيق GSAP


العرض المباشر


كود المصدر على جيثب