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

شرح مفصل لكل هوك في React

يوليو 01, 2025

🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...

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

يونيو 30, 2025

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

React Labs: View Transitions وActivity

يونيو 17, 2025

React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...

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

يوليو 02, 2025

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

The Ultimate Managed Hosting Platform