خريطة الأنماط التسعة

٩ أنماط، ٣ عائلات

الأنماط شكلها مختلف، بس السؤال اللي بيفرّقهم واحد: إيه اللي بيحصل لما المستخدم يعمل scroll؟

العائلة	إيه اللي بيحصل	الأنماط	الأداة
Layout	العنصر بيتصرّف بشكل خاص وهو بيتحرك	Sticky، Scroll snap	CSS بس
Triggered	حاجة بتحصل مرة لما عنصر يدخل الشاشة	Fade on enter، Infinite scroll، Scrollytelling	`IntersectionObserver`
Driven	قيمة ماشية مع كل بيكسل scroll	Progress bar، Zoom، Parallax، Horizontal	CSS scroll-driven animations

المستخدم عمل scroll… مين بيرد؟

المستخدم بيعمل scroll ← CSS layout: المتصفح لوحده
المستخدم بيعمل scroll ← IntersectionObserver: عدّى الحد؟
المستخدم بيعمل scroll ← scroll timeline: progress 0→1

الفرق بين Triggered و Driven

ده أكتر لبس بيحصل، فخليه في دماغك:

🔔 Triggered

زي جرس الباب: بيرن مرة لما حد يعدّي. العنصر بيدخل، الـ animation بتشتغل لآخرها بسرعتها هي، حتى لو المستخدم وقف.

🎚️ Driven

زي مفتاح الصوت: كل ما تلف أكتر، الصوت يعلى. الـ animation مربوطة بمكان الـ scroll، تقف لما تقف وترجع لما ترجع.

٣ قواعد لكل الأنماط

💡٣. احترم prefers-reduced-motion

ناس كتير بيجيلها دوخة من الحركة الكتير، وبيفعّلوا “تقليل الحركة” في الجهاز. كل ديمو في المذكرة دي بيوقف الحركة لو الإعداد ده شغال، واعمل نفس الحكاية في شغلك:

@media (prefers-reduced-motion: reduce) {  .reveal, .parallax-layer { animation: none; transition: none; }}

خلّصت الفصل لما

تقسّم الـ ٩ أنماط على Layout و Triggered و Driven
تفرّق triggered عن driven بمثال
تعرف ليه scroll event للشغل التقيل فكرة وحشة
تعرف إن transform و opacity هم الأرخص في التحريك
تحترم prefers-reduced-motion

🧠 اختبر نفسك

١) fade-in لما الكارت يدخل الشاشة: triggered ولا driven؟

triggered: بيحصل مرة، والـ animation بتكمل بسرعتها.

٢) شريط بيوضح قريت قد إيه من المقالة؟

driven: قيمته ماشية مع مكان الـ scroll بالظبط.

٣) ليه تحريك top مع الـ scroll بيقطّع؟

بيجبر المتصفح يعيد حساب الـ layout كل فريم. transform مش محتاج.