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

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

يوليو 01, 2025

🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...

تجاوز $fillable بأمان باستخدام forceFill() في Laravel

يوليو 02, 2025

تجاوز $fillable بأمان باستخدام forceFill() في Laravel جربت تستخدم create() في Laravel ولاقيت إن حقول زي role أو status مش بتتحفظ؟ ده بسبب حماية Larav...

استخدام useCallback في React: الفوائد، القيود، والممارسات المثالية

يوليو 31, 2025

Hook useCallback في React يُستخدم لإنشاء نسخة ثابتة من دالة (callback) بحيث لا يُعاد إنشاؤها إلا إذا تغيرت الـ dependencies المحددة. الهدف الأساسي م...

البرمجة الكائنية (OOP) – المفاهيم الأساسية

أغسطس 09, 2025

البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...

إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية

يوليو 16, 2025

🌐 إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية CSS دلوقتي بقت أذكى بكتير. دالة if()، وميزة popover="hint"، وازاي نكتب تنسيقات متج...