Scroll Driven و Zoom و Parallax — الحركة ماشية مع الـ scroll

الفكرة: الـ timeline بقى الـ scroll

الـ CSS animation العادية ماشية بالوقت: ثانيتين من 0% لـ 100%. الـ scroll-driven animation نفس الـ keyframes بالظبط، بس الـ 0% هو أول الـ scroll، والـ 100% هو آخره.

Scroll Driven: progress bar

.progress {  position: fixed;  inset: 0 0 auto;  height: 4px;  background: #6c4bff;  transform-origin: right; /* RTL: يتملا من اليمين */  animation: grow linear both;  animation-timeline: scroll(root block);}@keyframes grow {  from { transform: scaleX(0); }  to { transform: scaleX(1); }}

scroll(root block) معناها: الـ scroller هو الصفحة (root)، والمحور الرأسي (block). جوه container بيعمل scroll، استخدم scroll() من غير parameters، فياخد أقرب scroller.

Zoom on scroll: الصورة تكبر وهي داخلة

.photo {  animation: zoom-in linear both;  animation-timeline: view();  animation-range: entry 0% cover 50%; /* من أول ما يدخل لحد ما يوصل نص الشاشة */}@keyframes zoom-in {  from { transform: scale(0.55); opacity: 0.35; }  to { transform: scale(1); opacity: 1; }}

Parallax: الخلفية أبطأ

الإحساس بالعمق جاي من إن الطبقات البعيدة بتتحرك أبطأ. في الديمو: المحتوى بيطلع لفوق بسرعة الـ scroll، والجبال بتنزل شوية (فتبان أبطأ)، والشمس بتنزل أكتر (فتبان أبعد).

.hero { overflow: clip; } /* مش hidden، شوف التحذير تحت */.hero .far,.hero .near {  animation: linear both;  animation-timeline: scroll(root);  animation-range: 0 400px; /* أول 400px scroll بس، وده طول الـ hero */}.hero .far { animation-name: far; }.hero .near { animation-name: near; }@keyframes far { to { transform: translateY(240px); } }@keyframes near { to { transform: translateY(100px); } }

لو المتصفح مش بيدعم

الـ scroll-driven animations مدعومة في Chrome و Edge من 2023، وفي Safari الحديث. أما Firefox فكان لسه وراء flag آخر مرة راجعت، فشوف caniuse قبل ما تعتمد عليه. لفّها في @supports عشان المتصفح القديم يشوف الحالة النهائية الثابتة:

@supports (animation-timeline: scroll()) {  .progress { animation: grow linear both; animation-timeline: scroll(root block); }}

ولو لازم يشتغل في كل حتة، في polyfill رسمي من نفس الفريق (scroll-timeline polyfill)، أو ترجع لـ IntersectionObserver مع progress تقريبي.

خلّصت الفصل لما

• تفرّق scroll() عن view()
• تعمل progress bar بـ animation-timeline
• تستخدم animation-range بـ entry و cover و contain
• تعمل parallax بطبقات بسرعات مختلفة
• تحمي الشغل بـ @supports و reduced motion