شروع Jewelry Website هو موقع تفاعلي لعرض وبيع المجوهرات، تم تصميمه ليقدم تجربة مستخدم راقية (Luxury Experience) تجمع بين الجمال البصري (UI) والحركات التفاعلية (Animation) لخلق ارتباط بصري مباشر بين المنتج والمستخدم.
تم التركيز في هذا المشروع على بناء تجربة سلسة تعتمد على الـ Scroll Interaction، حيث يتم توجيه المستخدم بصريًا من خلال حركة العناصر داخل الصفحة، مما يعزز الإحساس بالفخامة والاحترافية.
أهم المميزات التقنية التي تم تنفيذها: تجربة Scroll تفاعلية (Scroll-Based Animation):
تنفيذ حركة ديناميكية للحلقة (Ring) حيث تظهر كبداية للصفحة (Logo) ثم تتحرك مع الـ Scroll حتى تصل إلى موقعها الطبيعي على صورة الموديل.
استخدام JavaScript للتحكم في حركة العنصر وربطها بموقع الـ Scroll (scrollY).
خلق Storytelling Visual Experience بدل عرض تقليدي.
تصميم واجهة مستخدم احترافية (UI Design):
تصميم واجهة أنيقة باستخدام ألوان تعكس الفخامة (Gold – Beige – Brown).
استخدام خطوط احترافية مثل Playfair Display و Bitter لإبراز الهوية البصرية.
إضافة طبقة شفافة (Overlay Layer) على صورة الموديل مع نص H-E-R لخلق طابع أنثوي مميز.
نظام Navigation ذكي:
Navbar يظهر تدريجيًا عند الـ Scroll في الصفحة الرئيسية (Home).
في صفحة الـ Store يكون الـ Navbar Sticky وثابت لتحسين تجربة التصفح.
تصميم Navigation بسيط وواضح يدعم تجربة المستخدم (UX).
صفحة المتجر الديناميكية (Dynamic Store Page):
تحميل المنتجات من ملف JSON باستخدام XMLHttpRequest (AJAX).
عرض المنتجات بشكل ديناميكي داخل الصفحة بدون إعادة تحميل.
دعم عرض متعدد للمنتجات من Categories مختلفة.
تأثيرات تفاعلية على المنتجات (Hover Effects):
عند الـ Hover يتم تبديل صورة المنتج (Image Swap Effect).
ظهور زر Add to Cart بشكل تدريجي مع Animation.
تحسين التفاعل البصري مع المستخدم.
Top Categories Animation:
تنفيذ شريط أفقي متحرك (Marquee Effect) لعرض الفئات.
الحركة تتوقف عند Hover لإتاحة التحكم للمستخدم.
استخدام CSS Animations بدون مكتبات خارجية.
تصميم متجاوب (Responsive Design):
الموقع متوافق مع مختلف أحجام الشاشات.
الحفاظ على الشكل الجمالي والأداء على الموبايل والتابلت.
التقنيات المستخدمة:
HTML ,CSS , JavaScript , CSS Animations & Transitions , Flexbox Layout , AJAX (XMLHttpRequest)
