صفحة هبوط تفاعلية متحركة (Parallax Landing Page) باستخدام GSAP & ScrollTrigger

صفحة هبوط (Landing Page) عصرية ومبتكرة مخصصة لعرض منتج (مشروب التوت "Juicy")، تم تصميمها وتطويرها من الصفر كنموذج إبداعي يستهدف تقديم تجربة مستخدم ديناميكية. يرتكز المشروع بشكل أساسي على الأنيميشن المتقدم المعتمد على تمرير الشاشة (Scroll-driven animations)، حيث تتحرك عناصر المنتج والفاكهة وتتغير أحجامها وزواياها بسلاسة أثناء تنقل المستخدم بين أقسام الصفحة. 🛠️ الميزات والتقنيات المستخدمة : تأثيرات حركية متقدمة (GSAP & ScrollTrigger): الاعتماد على مكتبة GreenSock لإنشاء خط زمني (Timeline) يربط حركة العناصر (العبوة، أوراق الشجر، حبات التوت) بنسبة تمرير المستخدم (Scrub: true)، مما يخلق عمقاً بصرياً يشبه التأثيرات ثلاثية الأبعاد. هيكلة ويب دلالية (HTML5): بناء هيكل الصفحة بأسلوب منظم ونظيف لتسهيل القراءة والربط مع مكتبات الأنيميشن الخارجية. تنسيق مرن وتصميم متقن (CSS3): استخدام نظام الـ Flexbox لتوزيع العناصر الإعلانية والنصوص بدقة.الاعتماد على الأبعاد النسبية والتمرير المطلق (position: absolute) لضبط الأشكال المتطايرة في الخلفية. دمج التدرجات الدائرية (radial-gradient) وخطوط Google المخصصة (Anton & Roboto) لإعطاء هوية بصرية قوية للمنتج. استخدام خاصية clamp() البرمجية في التنسيق لضمان مرونة حجم النصوص الكبيرة مع أحجام الشاشات المختلفة. كود JavaScript منظم وقابل للتعديل: تم فصل منطق الحركة في ملف مستقل (script.js) مع تحديد نقاط بداية ونهاية واضحة للأنيميشن (start & end) لتسهيل أي تعديل مستقبلي على سرعة أو مكان الحركة.