Header يثبت وبعدين يسلّم
position: sticky; top: 0 جوه sectionلوحات تقف مكانها
scroll-snap-type: y mandatory + scroll-snap-align: startheader ثابت بيغطي الـ anchor
scroll-padding-topيظهر مرة لما يدخلIntersectionObserver +
unobserveهات صفحة جديدة قرب الآخرsentinel +
rootMargin موجب من تحت + useInfiniteQueryprogress bar للقراية
animation-timeline: scroll(root block)animation وعنصر بيعدّي
animation-timeline: view() + animation-rangeصورة تكبر وهي داخلةview() +
entry 0% cover 50%parallaxطبقات بـ translateY مختلف على نفس scroll()
رأسي ← بالعرضwrap طويل + stage sticky + track بـ view-timeline و contain
مشهد ثابت وخطواتsticky scene + IntersectionObserver بـ
rootMargin: -50% 0px -50% 0pxالمتصفح مش بيدعم timelines
@supports (animation-timeline: scroll())الحركة بتدوّخ
prefers-reduced-motion: reduce → animation: noneالـ shorthand لغى الـ timelineاكتب
animation-timeline بعد animationخلّصت المذكرة لما
🧠 اختبر نفسك
١) أنهي أنماط محتاجة JavaScript؟
Triggered و Infinite و Scrollytelling (IntersectionObserver). الباقي CSS بس.
٢) ليه الـ timeline بيتلغي ساعات من غير سبب؟
اتكتب قبل الـ animation shorthand، فالـ shorthand رجّعه auto.