حركات التمرير: animation-timeline بدلاً من IntersectionObserver

Scroll-driven animations تقطع المشكلة من جذرها. إنها نفس حركة CSS التي تعرفها، مع استبدال واحد: بدلاً من أن الوقت يقود التقدم، يقوم موضع حاوية التمرير بذلك. يمكن للمتصفح تشغيله على المحرّك المركّب.

شريط التقدم في أربعة أسطر

css

.progress {
position: fixed;
inset: 0 0 auto 0;
height: 4px;
transform-origin: left;
animation: grow linear both;
animation-timeline: scroll(root block);
}

@keyframes grow {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}

الكشف عند التمرير: الجدول الزمني view()

css

.reveal {
animation: fade-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}

@keyframes fade-up {
from { opacity: 0; transform: translateY(32px); }
to   { opacity: 1; transform: translateY(0); }
}

النطاقات الأربعة المُسمّاة: entry، exit، cover (الافتراضي)، contain.

الفخ الذي يكلفك ساعة: اختصار animation يعيد ضبط الجدول الزمني

css

/* مكسور: الاختصار يعيد ضبط animation-timeline إلى auto */
.reveal {
animation-timeline: view();
animation-range: entry 0% entry 60%;
animation: fade-up linear both;
}

css

/* صحيح: الجدول الزمني والنطاق بعد الاختصار */
.reveal {
animation: fade-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}

الجداول الزمنية المُسمّاة

css

.gallery {
overflow-x: auto;
scroll-timeline: --gallery inline;
}

.gallery-indicator {
animation: fill linear both;
animation-timeline: --gallery;
timeline-scope: --gallery;
}

التحسين التدريجي ليس اختيارياً هنا

css

.reveal {
opacity: 1;
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
}

المزالق وأفضل الممارسات

• حرّك transform وopacity فقط.
• لا تخفِ أبداً محتوى لا يمكن الكشف عنه إلا بحركة.
• "لماذا حركتي متوقفة؟" هي في الغالب مشكلة حاوية التمرير.
• استخدم both كوضع التعبئة.
• تقليل الحركة إعداد طبي، ليس مجاملة.
• لا تحذف JavaScript الذي لا تزال بحاجة إليه.

خلاصة

Scroll-driven animations تطبّق نفس الفكرة المتعلقة بالخيط الرئيسي على فئة كاملة من التأثيرات: ما كان يتطلب مستمع تمرير وobserver وتغيير فئة يصبح خاصية CSS واحدة.