هذا المثال يستخدم JavaScript فقط لربط الحركة بموقع التمرير: بار تقدم، بارالاكس للخلفية، وبطاقات تظهر تدريجيًا أثناء النزول. الكود بسيط وقابل للتخصيص سريعًا.
ابدأ الاستكشاف ↓يتحرك بنسبة المسافة المقطوعة في الصفحة، مع تحديث سريع جدًا للحصول على إحساس ناعم.
صورة الهيرو تتحرك بخفة عكس اتجاه التمرير (scrubbed) لتعطي عمقًا بصريًا دون تشتيت.
تظهر البطاقات عبر IntersectionObserver مع انتقال سلس وتكثيف الظلال عند التحويم.
الضغط على الأزرار يحرك الصفحة بسلاسة إلى الهدف بفضل scroll-behavior: smooth.
نقوم بتحديث متغيرات CSS في الوقت الحقيقي (مثل --y) للتأثيرات الدقيقة.
نستخدم requestAnimationFrame وتحوّلات تعتمد على GPU فقط (translate/scale/opacity).
أضف مقاطع جديدة، عدّل آليات الظهور، أو بدّل معادلة البارالاكس بسهولة.
كل شيء Vanilla JS + CSS، مما يجعل الحجم صغيرًا والاستخدام بسيطًا ومباشرًا.
فيديو مع تأثيرات parallax متعددة الطبقات وتفاعل مع الماوس
تأثيرات parallax متقدمة مع تحريك النص والصور
تأثيرات morphing مع تحريك ثلاثي الأبعاد
تأثيرات متقدمة مع تفاعل ثلاثي الأبعاد
فيديو مع parallax متعدد الطبقات وتفاعل مع الماوس
صور مع تأثيرات morphing وحركة ثلاثية الأبعاد
نصوص تتبع الماوس مع تأثيرات ضوئية
تأثيرات اسكرول متطورة مع تحسينات الأداء
