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

المدونة

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

يونيو 26, 2025

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

حلل مشروع Laravel بـ Introspect

يوليو 01, 2025

حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev‪، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...

نظام طوابير Laravel واستخدام Supervisor في الإنتاج

يوليو 01, 2025

🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...

تذكير بالمهام مع Laravel وMongoDB

يونيو 30, 2025

📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...

أحدث مميزات ECMAScript 2025

يونيو 30, 2025

أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...

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

يوليو 01, 2025

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