دليل للأنيميشن المتحركة بالسكّول بس بـ CSS

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS

دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت.

1. التلات مكونات بتوع أي أنيميشن:

Target: العنصر اللي هيتعمله أنيميشن.
Keyframes: بيتحدد بيها خطوات الحركة.
Timeline: بيحكم الحركة حسب السكّول أو الظهور، مش الزمن.

2. استخدام `scroll()` كـ Timeline

التقدّم في الأنيميشن بيبقى بمقدار درجة السكّول، مش الوقت:

footer::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  height: 1em;
  width: 100%;
  background: gold;
  animation: progress-expand;
  animation-timeline: scroll();
}

@keyframes progress-expand {
  from { width: 0%; }
  to { width: 100%; }
}

3. راعي المستخدمين اللي عندهم حساسية للحركة

لف الأنيميشن بمعاينة تفضيل الحركة:

@media not (prefers-reduced-motion) {
  footer::after {
    animation: progress-expand;
    animation-timeline: scroll();
  }
}

4. خواص متقدمة

تقدر تستخدم scroll(nearest block)، أنيمتيشن timeline مسمّاة، view()، animation-range، وكمان timeline-scope عشان تتحكم في السلوك بشكل أدق.

الأنيميشن بالسكّول شغالة حاليًا في Safari 26 beta وChrome 115+، وبتدي تجربة سلسة وسريعة.

المدونة

إتقان التكرار غير المتزامن في JavaScript باستخدام Array.fromAsync()

يوليو 27, 2025

🔍 ما هي Array.fromAsync() بالضبط؟ Array.fromAsync() هي دالة static من كائن Array، شبيهة بالدالة Array.from()، لكن الفرق الجوهري هو أن Array.fromAs...

حقق أداءً أعلى لتقارير البيانات الضخمة باستخدام نظام (Queues)

يوليو 07, 2025

إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...

مقارنة CSS: طبقات vs BEM vs Utility Classes

يونيو 26, 2025

مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS – BEM والـ utility‑first classes وك...

تعزيز PHP Enums باستخدام archtechx/enums

يوليو 01, 2025

تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP 8.1، ظهر نوع جديد اسمه “enums” بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...

وقّف نسخ الكود! اتعلم تستخدم Traits في Laravel صح