ازاي تعمل حركات احترافية مع التمرير باستخدام Scroll-driven Animations؟

مين فينا ممرش بالموقف ده: العميل عايز الموقع "يتحرك" مع التمرير (Scroll)، زي المواقع العالمية اللي بنشوفها على Awwwards، فتضطر تروح تستخدم مكتبات JavaScript تقيلة زي GSAP أو ScrollMagic. طبعاً الـ Performance بيقع، والموبايل بيبدأ يهنج، وبتقضي وقتك كله بتحاول تظبط الـ Event Listeners عشان ما تستهلكش الـ CPU. طيب لو قلتلك إن المتصفحات دلوقتي بقت بتعمل ده بـ CSS صافي وبأداء "خرافي"؟

إيه هي الـ Scroll-driven Animations؟

الـ Scroll-driven Animations هي تقنية جديدة في الـ CSS بتسمحلك تربط حركة العنصر (Animation) بمكان التمرير (Scroll Position). زمان كان لازم تعمل window.addEventListener('scroll', ...)، لكن دلوقتي المتصفح هو اللي بيشيل الليلة دي كلها من خلال خاصية اسمها animation-timeline. يعني الحركة بتبقى Synchronized (متزامنة) مع حركة صباع المستخدم على الشاشة، ومن غير ما تكتب سطر جافاسكريبت واحد.

ليه نستخدمها بدل الـ JavaScript؟

الميزة الكبرى هنا هي الـ Performance. المتصفحات بتنفذ الحركة دي في الـ Compositor Thread، وده معناه إنها مش بتأثر على الـ Main Thread الخاص بالجافاسكريبت. النتيجة؟ أنيميشن ناعم جداً (Smooth) حتى لو الصفحة تقيلة، ومفيش أي استهلاك زيادة للميموري.

إزاي تبدأ تستخدمها؟ (الخطوات العملية)

عشان تشغل الخاصية دي، محتاج تعرف حاجتين أساسيتين: الـ Scroll Timeline والـ View Timeline.

1. الـ Scroll Timeline: ودي بتربط الحركة بطول الصفحة كله.

.progress-bar {
  animation: grow-progress auto linear;
  animation-timeline: scroll(root);
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

2. الـ View Timeline: ودي بتخلي العنصر يتحرك لما يظهر هو نفسه في الـ Viewport، ودي ميزة عبقرية عشان تعمل تأثيرات ظهور الصور أو النصوص.

.reveal-element {
  view-timeline-name: --my-element;
  view-timeline-axis: block;

  animation-timeline: --my-element;
  animation-name: show;
  animation-range: entry 10% cover 30%;
}

@keyframes show {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

تريكات للمحترفين

أهم حاجة تاخد بالك منها هي الـ animation-range. الخاصية دي هي اللي بتحدد "إمتى" تبدأ الحركة و"إمتى" تنتهي بالنسبة لظهور العنصر. جرب تلعب بقيم زي entry و exit و cover عشان توصل لتأثيرات مبههرة.

خلي بالك برضه إن الميزة دي مدعومة بشكل ممتاز في المتصفحات الحديثة (Chromium-based)، ولو عايز تدعم المتصفحات القديمة، ممكن تستخدم الـ Scroll-driven Animations Polyfill، بس دايماً فكر في الـ Progressive Enhancement.

نصيحة من أخوك

التقنيات دي بتخلي الـ UX (تجربة المستخدم) في حتة تانية خالص، بس نصيحتي ليك: ما تبالغش. الأنيميشن الكتير بيشتت المستخدم وبيخلي الصفحة تبان "دوشة". استخدم الـ Scroll-driven Animations عشان تضيف قيمة بصرية، زي Progress bar بسيط، أو ظهور تدريجي للنصوص، مش عشان تحول الموقع لفيلم سينما يرهق عين المستخدم.

جرب تفتح الـ CodePen وتبدأ بـ Progress Bar بسيط، وبعدها اتنقل لتأثيرات الـ Parallax. المجال واسع جداً ومستني إبداعك!