دليل للأنيميشن المتحركة بالسكّول بس بـ 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+، وبتدي تجربة سلسة وسريعة.
المدونة
يونيو 26, 2025
ألوان في CSS - شرح مبسّط النهارده هنتكلم عن الألوان في CSS: ازاي بنحددها، وخصوصًا الطرق الحديثة زي lab() وoklch(). 1. يعني إيه لون؟ مفيش حاجة اسم...
يوليو 13, 2025
في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...
يوليو 01, 2025
🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...
يوليو 26, 2025
1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...
يوليو 20, 2025
🔧 1. لارافيل 12.0 – ستارتر كيتس وتعديلات أساسية إصدار 12.0 جاب Starter Kits جاهزة للـ React، Vue، Livewire، وكمان دمج مع WorkOS AuthKit،...
يوليو 20, 2025
دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...