دليل للأنيميشن المتحركة بالسكّول بس بـ 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+، وبتدي تجربة سلسة وسريعة.

المدونة

React Native 0.80 وExecuTorch: بداية قوية للذكاء الاصطناعي المحلي في تطبيقات الموبايل

يوليو 28, 2025

🚀 الجديد في React Native 0.80 بالتفصيل الإصدار React Native 0.80 يعتبر نقطة تحول حقيقية في عالم تطوير تطبيقات الموبايل باستخدام React Native. التح...

نظرة معمقة على Laravel Context: تسجيل وتحليل السياق البرمجي باحترافية

يوليو 20, 2025

في Laravel 12، تم تقديم Laravel Context كأداة قوية بتخلي تتبع الطلبات، تسجيل الأخطاء، وتحليل سلوك الوظائف الخلفية أسهل وأدق من أي وقت فات. وده بيحصل ع...

مكونات واجهة المستخدم والتفاعل الأساسية في React Native

يوليو 01, 2025

مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...

استكشف أقوى تقنيات Laravel الحديثة: Inertia.js، View Creators، وHLS خطوة بخطوة

يوليو 27, 2025

أدوات قوية تقدر تستخدمها لتطوير تطبيقات Laravel بشكل احترافي: Inertia.js v2، وView Creators، وحزمة Laravel HLS لبث الفيديوهات بأمان. ١. Inertia.j...

الفرق بين Redux, Context & React Components في إدارة الحالة

أغسطس 06, 2025

عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...

ألوان في CSS - شرح مبسّط