دليل للأنيميشن المتحركة بالسكّول بس بـ 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 بحت. 1. التلات مكونات بتوع...
يوليو 01, 2025
حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
يونيو 30, 2025
📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...