دليل للأنيميشن المتحركة بالسكّول بس بـ 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+، وبتدي تجربة سلسة وسريعة.
المدونة
يوليو 01, 2025
🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...
يوليو 01, 2025
حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...
يونيو 17, 2025
React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...
يونيو 29, 2025
إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...
يوليو 01, 2025
🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...