إتقان نطاق الرسوم المتحركة في CSS: حدود دقيقة للرسوم المتحركة المستندة إلى التمرير

في عالم تطوير الويب الديناميكي، تسود تجربة المستخدم. لم تعد الواجهات التفاعلية والجذابة مجرد رفاهية؛ بل أصبحت ضرورة. لسنوات، كان إنشاء رسوم متحركة متطورة تعتمد على التمرير - حيث تستجيب العناصر ديناميكيًا لإجراءات تمرير المستخدم - يتطلب في كثير من الأحيان الاعتماد على مكتبات JavaScript المعقدة. وعلى الرغم من قوتها، إلا أن هذه الحلول كانت تتسبب أحيانًا في زيادة العبء على الأداء وزيادة تعقيد التطوير.

نقدم لكم نطاق الرسوم المتحركة في CSS (CSS Animation Range)، وهي إضافة ثورية إلى وحدة الرسوم المتحركة المستندة إلى التمرير في CSS. تُمكّن هذه الميزة المبتكرة المطورين من تحديد حدود دقيقة لوقت بدء وانتهاء الرسوم المتحركة على خط زمني معين للتمرير، كل ذلك مباشرة داخل CSS. إنها طريقة تعريفية وعالية الأداء وأنيقة لإضفاء الحيوية على تصميمات الويب الخاصة بك، مما يوفر تحكمًا دقيقًا في تأثيرات التمرير التي كانت في السابق مرهقة أو مستحيلة باستخدام CSS الأصلي وحده.

سيتعمق هذا الدليل الشامل في تعقيدات نطاق الرسوم المتحركة في CSS. سنستكشف مفاهيمها الأساسية، ونحلل خصائصها، ونعرض تطبيقات عملية، ونناقش التقنيات المتقدمة، ونقدم أفضل الممارسات لدمجها بسلاسة في مشاريع الويب العالمية الخاصة بك. بحلول النهاية، ستكون مجهزًا للاستفادة من هذه الأداة القوية لإنشاء تجارب تمرير آسرة وعالية الأداء للمستخدمين في جميع أنحاء العالم.

فهم المفاهيم الأساسية للرسوم المتحركة المستندة إلى التمرير

قبل أن نحلل animation-range، من الضروري فهم السياق الأوسع للرسوم المتحركة المستندة إلى التمرير في CSS والمشكلات التي تحلها.

تطور الرسوم المتحركة المستندة إلى التمرير

تاريخيًا، كان تحقيق التأثيرات المرتبطة بالتمرير على الويب يتضمن قدرًا كبيرًا من JavaScript. أصبحت مكتبات مثل ScrollTrigger من GSAP أو ScrollMagic أو حتى تطبيقات Intersection Observer المخصصة أدوات لا غنى عنها للمطورين. على الرغم من أن هذه المكتبات قدمت مرونة هائلة، إلا أنها جاءت مع بعض التنازلات:

• الأداء: يمكن أن تؤدي الحلول القائمة على JavaScript، خاصة تلك التي تعيد حساب المواضع بشكل متكرر عند التمرير، أحيانًا إلى تقطع أو رسوم متحركة أقل سلاسة، خاصة على الأجهزة المنخفضة المواصفات أو الصفحات المعقدة.
• التعقيد: أضاف دمج وإدارة هذه المكتبات طبقات إضافية من التعليمات البرمجية، مما زاد من منحنى التعلم واحتمالية حدوث الأخطاء.
• التعريفي مقابل الأمرى: غالبًا ما تتطلب JavaScript نهجًا أمرًا ("افعل هذا عندما يحدث ذلك")، بينما تقدم CSS بطبيعتها أسلوبًا تعريفيًا ("يجب أن يبدو هذا العنصر هكذا في ظل هذه الظروف"). تتماشى حلول CSS الأصلية بشكل أفضل مع هذا الأخير.

يمثل ظهور الرسوم المتحركة المستندة إلى التمرير في CSS تحولًا كبيرًا نحو نهج أكثر أصالة وأداءً وتعريفًا. من خلال تفويض هذه الرسوم المتحركة إلى محرك عرض المتصفح، يمكن للمطورين تحقيق تأثيرات أكثر سلاسة باستخدام تعليمات برمجية أقل.

تقديم animation-timeline

يكمن أساس الرسوم المتحركة المستندة إلى التمرير في CSS في خاصية animation-timeline. بدلاً من مدة زمنية ثابتة، تسمح animation-timeline للرسوم المتحركة بالتقدم بناءً على موضع تمرير عنصر محدد. تقبل وظيفتين أساسيتين:

• scroll(): تنشئ هذه الوظيفة خطًا زمنيًا لتقدم التمرير. يمكنك تحديد موضع تمرير أي عنصر يجب أن يقود الرسوم المتحركة. على سبيل المثال، يشير scroll(root) إلى حاوية التمرير الرئيسية للمستند، بينما يشير scroll(self) إلى العنصر نفسه إذا كان قابلاً للتمرير. يتتبع هذا الخط الزمني التقدم من البداية (0%) إلى النهاية (100%) من المنطقة القابلة للتمرير.
• view(): تنشئ هذه الوظيفة خطًا زمنيًا لتقدم العرض. على عكس scroll() التي تتتبع نطاق التمرير بأكمله، تتتبع view() رؤية العنصر داخل حاوية التمرير الخاصة به (عادةً ما تكون منفذ العرض). تتقدم الرسوم المتحركة عندما يدخل العنصر ويعبر ويخرج من العرض. يمكنك أيضًا تحديد axis (block أو inline) و target (مثل cover، contain، entry، exit).

بينما تحدد animation-timeline ما يقود الرسوم المتحركة، فإنها لا تحدد متى يجب تشغيل الرسوم المتحركة فعليًا ضمن هذا الخط الزمني المستند إلى التمرير. هذا هو المكان الذي يصبح فيه animation-range لا غنى عنه.

ما هو animation-range؟

في جوهرها، تسمح لك animation-range بتحديد الجزء المحدد من الخط الزمني للتمرير الذي سيتم خلاله تنفيذ الرسوم المتحركة في CSS. فكر في الخط الزمني للتمرير على أنه مسار من 0% إلى 100%. بدون animation-range، سيتم تشغيل الرسوم المتحركة المرتبطة بخط زمني للتمرير عادةً عبر نطاق 0-100% بالكامل من هذا الخط الزمني.

ولكن، ماذا لو كنت تريد فقط أن يتلاشى عنصر ما أثناء دخوله إلى منفذ العرض (على سبيل المثال، من 20% مرئي إلى 80% مرئي)؟ أو ربما تريد أن يحدث تحول معقد فقط عندما يتجاوز المستخدم قسمًا معينًا، ثم ينعكس عند التمرير للخلف؟

توفر animation-range هذا التحكم الدقيق. تعمل بالاقتران مع animation-timeline وتعريفات @keyframes الخاصة بك لتقديم تنسيق دقيق للتأثيرات. إنها في الأساس زوج من القيم - نقطة بداية ونقطة نهاية - تحدد الجزء النشط من الخط الزمني للتمرير لرسوم متحركة معينة.

قارن هذا بـ animation-duration في الرسوم المتحركة التقليدية القائمة على الوقت. تحدد animation-duration المدة التي تستغرقها الرسوم المتحركة. مع الرسوم المتحركة المستندة إلى التمرير، يتم تحديد "المدة" فعليًا بمقدار التمرير المطلوب لاجتياز animation-range المحدد. كلما كان التمرير أسرع، كلما تم تشغيل الرسوم المتحركة بشكل أسرع خلال نطاقها.

نظرة عميقة على خصائص animation-range

خاصية animation-range هي اختصار لـ animation-range-start و animation-range-end. دعنا نستكشف كل منها بالتفصيل، إلى جانب مجموعتها القوية من القيم المقبولة.

animation-range-start و animation-range-end

تحدد هذه الخصائص نقاط البداية والنهاية للنطاق النشط للرسوم المتحركة على الخط الزمني للتمرير المرتبط بها. يمكن تحديدها بشكل فردي أو دمجها باستخدام اختصار animation-range.

• animation-range-start: تحدد النقطة على الخط الزمني للتمرير حيث يجب أن تبدأ الرسوم المتحركة.
• animation-range-end: تحدد النقطة على الخط الزمني للتمرير حيث يجب أن تنتهي الرسوم المتحركة.

القيم المقدمة لهذه الخصائص تكون نسبية لـ animation-timeline المختار. بالنسبة لخط زمني scroll()، يشير هذا عادةً إلى تقدم تمرير الحاوية. بالنسبة لخط زمني view()، فإنه يشير إلى دخول/خروج العنصر من منفذ العرض.

اختصار animation-range

تسمح لك الخاصية المختصرة بتعيين كل من نقاط البداية والنهاية بإيجاز:

.element {\n  animation-range:  [  ];\n}

إذا تم توفير قيمة واحدة فقط، فإنها تعيّن كل من animation-range-start و animation-range-end إلى نفس القيمة، مما يعني أن الرسوم المتحركة سيتم تشغيلها فورًا في تلك النقطة (على الرغم من أنها ليست مفيدة عادةً للرسوم المتحركة المستمرة).

القيم المقبولة لـ animation-range

هنا يتألق animation-range حقًا، حيث يقدم مجموعة غنية من الكلمات الرئيسية والقياسات الدقيقة:

1. النسب المئوية (مثل 20%, 80%)

تحدد النسب المئوية نقاط بداية ونهاية الرسوم المتحركة كنسبة مئوية من الطول الإجمالي للخط الزمني للتمرير. هذا بديهي بشكل خاص لخطوط scroll() الزمنية.

• مثال: رسوم متحركة تتلاشى عنصرًا أثناء تمرير المستخدم عبر القسم الأوسط من الصفحة.

.fade-in-middle {\n  animation: fadeIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 70%; /* يبدأ عند تمرير 30%، وينتهي عند تمرير 70% */\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}

في هذا المثال، سيتم تشغيل الرسوم المتحركة fadeIn فقط عندما يكون موضع تمرير حاوية التمرير الجذر بين 30% و 70% من إجمالي ارتفاعها القابل للتمرير. إذا قام المستخدم بالتمرير بشكل أسرع، فستكتمل الرسوم المتحركة بشكل أسرع ضمن هذا النطاق؛ وإذا قام بالتمرير بشكل أبطأ، فسيتم تشغيلها بشكل تدريجي أكثر.

2. الأطوال (مثل 200px, 10em)

تحدد الأطوال نقاط بداية ونهاية الرسوم المتحركة كمسافة مطلقة على طول الخط الزمني للتمرير. هذا أقل شيوعًا للاستخدام في تمرير الصفحة العام ولكن يمكن أن يكون مفيدًا للرسوم المتحركة المرتبطة بمواضع عناصر محددة أو عند التعامل مع حاويات تمرير ذات حجم ثابت.

• مثال: رسوم متحركة على معرض صور يتم تمريره أفقيًا يتم تشغيلها خلال أول 500 بكسل من التمرير.

.gallery-caption {\n  animation: slideCaption 1s linear forwards;\n  animation-timeline: scroll(self horizontal);\n  animation-range: 0px 500px;\n}\n\n@keyframes slideCaption {\n  from { transform: translateX(100px); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}

3. الكلمات الرئيسية لخطوط view() الزمنية

هذه الكلمات الرئيسية قوية بشكل خاص عند استخدامها مع خط زمني view()، مما يسمح بالتحكم الدقيق في سلوك الرسوم المتحركة عند دخول عنصر أو خروجه من منفذ العرض أو حاوية التمرير.

• entry: يبدأ نطاق الرسوم المتحركة عندما يعبر حد منفذ تمرير العنصر نقطة entry للكتلة الحاوية له. هذا يعني عادةً عندما تبدأ الحافة الأولى للعنصر في الظهور في منفذ العرض.
• exit: ينتهي نطاق الرسوم المتحركة عندما يعبر حد منفذ تمرير العنصر نقطة exit للكتلة الحاوية له. هذا يعني عادةً عندما تختفي الحافة الأخيرة للعنصر من منفذ العرض.
• cover: يتم تشغيل الرسوم المتحركة على مدار المدة التي *يغطي* فيها العنصر حاوية التمرير أو منفذ العرض. يبدأ عندما تدخل الحافة الأمامية للعنصر منفذ التمرير وينتهي عندما تخرج حافته الخلفية. غالبًا ما يكون هذا هو السلوك الافتراضي أو الأكثر بديهية لرسوم متحركة لعنصر داخل العرض.
• contain: يتم تشغيل الرسوم المتحركة بينما يكون العنصر *محتوى بالكامل* داخل حاوية التمرير/منفذ العرض. يبدأ عندما يكون العنصر مرئيًا بالكامل وينتهي عندما يبدأ أي جزء منه في المغادرة.
• start: مشابه لـ entry، ولكنه يشير تحديدًا إلى حافة البداية لمنفذ التمرير بالنسبة للعنصر.
• end: مشابه لـ exit، ولكنه يشير تحديدًا إلى حافة النهاية لمنفذ التمرير بالنسبة للعنصر.

يمكن أيضًا دمج هذه الكلمات الرئيسية مع إزاحة طول أو نسبة مئوية، مما يوفر تحكمًا أدق. على سبيل المثال، entry 20% يعني أن الرسوم المتحركة تبدأ عندما يدخل العنصر بنسبة 20% في منفذ العرض.

• مثال: شريط تنقل ثابت يغير لونه أثناء "تغطيته" للقسم الرئيسي.

.hero-section {\n  height: 500px;\n  /* ... أنماط أخرى ... */\n}\n\n.sticky-nav {\n  position: sticky;\n  top: 0;\n  animation: navColorChange 1s linear forwards;\n  animation-timeline: view(); /* بالنسبة لمنظوره الخاص في منفذ التمرير */\n  animation-range: cover;\n}\n\n@keyframes navColorChange {\n  0% { background-color: transparent; color: white; }\n  100% { background-color: #333; color: gold; }\n}

في هذا السيناريو، مع تغطية عنصر .sticky-nav (أو العنصر الذي يرتبط به خط view() الزمني) لمنفذ العرض، تتقدم الرسوم المتحركة navColorChange.

• مثال: صورة تتوسع بمهارة عند دخولها منفذ العرض ثم تتقلص مرة أخرى عند مغادرتها.

.image-wrapper {\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 20% cover 80%; /* يبدأ عندما يكون 20% من العنصر مرئيًا، ويستمر حتى يغطي 80% من العنصر العرض */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); } /* أقصى تكبير عندما يكون في المنتصف تقريبًا */\n  100% { transform: scale(1); }\n}

يوضح هذا كيف يمكن لـ animation-range ربط أجزاء من الخط الزمني لـ view() بمراحل مختلفة من رسوم @keyframes المتحركة.

4. normal (الافتراضي)

الكلمة الرئيسية normal هي القيمة الافتراضية لـ animation-range. تشير إلى أنه يجب تشغيل الرسوم المتحركة عبر الطول الكامل للخط الزمني للتمرير المختار (0% إلى 100%).

على الرغم من أنها غالبًا ما تكون مناسبة، قد لا توفر normal التوقيت الدقيق اللازم للتأثيرات المعقدة، وهذا هو بالضبط سبب تقديم animation-range تحكمًا أكثر دقة.

التطبيقات العملية وحالات الاستخدام

تكمن قوة animation-range في قدرتها على إضفاء الحيوية على تأثيرات التمرير التفاعلية والمتطورة بأقل جهد وأقصى أداء. دعنا نستكشف بعض حالات الاستخدام المقنعة التي يمكن أن تعزز تجربة المستخدم على نطاق عالمي، من مواقع التجارة الإلكترونية إلى المنصات التعليمية.

تأثيرات تمرير Parallax

Parallax، حيث يتحرك محتوى الخلفية بسرعة مختلفة عن محتوى المقدمة، يخلق وهمًا بالعمق. تقليديًا، كان هذا مرشحًا رئيسيًا لـ JavaScript. مع animation-range، يصبح الأمر أبسط بكثير.

تخيل موقع ويب للسفر يعرض وجهات سياحية. أثناء تمرير المستخدم، يمكن أن تتحرك صورة خلفية لأفق مدينة ببطء، بينما تتحرك عناصر المقدمة مثل النص أو الأزرار بالسرعة العادية. من خلال تحديد خط زمني scroll(root) وتطبيق رسوم متحركة transform: translateY() مع animation-range محدد، يمكنك تحقيق تأثير parallax سلس دون حسابات معقدة.

.parallax-background {\n  animation: moveBackground var(--parallax-speed) linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%; /* أو نطاق قسم معين */\n}\n\n@keyframes moveBackground {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100px); } /* تتحرك لأعلى 100 بكسل على مدار التمرير الكامل */\n}

يضمن animation-range مزامنة تأثير parallax مع التمرير العام للمستند، مما يوفر تجربة سلسة وغامرة.

رسوم متحركة لكشف العناصر

نمط شائع في واجهة المستخدم هو كشف العناصر (تلاشي، انزلاق لأعلى، توسع) عند دخولها منفذ عرض المستخدم. هذا يلفت الانتباه إلى المحتوى الجديد ويخلق إحساسًا بالتقدم.

فكر في منصة دورات عبر الإنترنت: أثناء تمرير المستخدم عبر درس، يمكن أن يتلاشى كل عنوان قسم جديد أو صورة جديدة وينزلق إلى العرض بأناقة. باستخدام animation-timeline: view() مع animation-range: entry 0% cover 50%، يمكنك تحديد أن يتلاشى العنصر من الشفافية الكاملة إلى التعتيم الكامل عند دخوله منفذ العرض ووصوله إلى منتصفه.

.reveal-item {\n  opacity: 0;\n  transform: translateY(50px);\n  animation: revealItem 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 10% cover 50%; /* يبدأ عندما يكون 10% مرئيًا، وينتهي عندما يكون 50% مرئيًا */\n}\n\n@keyframes revealItem {\n  to { opacity: 1; transform: translateY(0); }\n}

يجعل هذا النهج تحميل المحتوى يبدو أكثر ديناميكية وجاذبية، سواء كان وصف منتج على موقع تجارة إلكترونية أو قسم في مقال مدونة على بوابة إخبارية.

مؤشرات التقدم

بالنسبة للمقالات الطويلة أو أدلة المستخدم أو النماذج متعددة الخطوات، يمكن لمؤشر التقدم أن يعزز بشكل كبير من قابلية الاستخدام من خلال إظهار للمستخدمين مكانهم ومقدار المتبقي. النمط الشائع هو شريط تقدم القراءة في الجزء العلوي من منفذ العرض.

يمكنك إنشاء شريط رفيع في أعلى الصفحة وربط عرضه بتقدم تمرير المستند. مع animation-timeline: scroll(root) و animation-range: 0% 100%، يمكن أن يتوسع عرض الشريط من 0% إلى 100% أثناء تمرير المستخدم من أعلى الصفحة إلى أسفلها.

.progress-bar {\n  position: fixed;\n  top: 0; left: 0;\n  height: 5px;\n  background-color: #007bff;\n  width: 0%; /* الحالة الأولية */\n  animation: fillProgress 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%;\n  z-index: 1000;\n}\n\n@keyframes fillProgress {\n  to { width: 100%; }\n}

يوفر هذا إشارة مرئية واضحة تحسن التنقل وتقلل من إحباط المستخدم في الصفحات ذات المحتوى الكثيف، وهي ميزة قيمة لاستهلاك المحتوى العالمي.

رسوم متحركة معقدة متعددة المراحل

يتألق animation-range حقًا عند تنسيق تسلسلات معقدة حيث تحتاج رسوم متحركة مختلفة إلى التشغيل عبر أجزاء محددة وغير متداخلة من خط زمني واحد للتمرير.

تخيل صفحة "تاريخ شركتنا". أثناء تمرير المستخدم، يمرون بأقسام "معالم". يمكن لكل معلم أن يطلق رسومًا متحركة فريدة:

• المعلم 1: يدور رسم ويتوسع (animation-range: 10% 20%)
• المعلم 2: ينزلق عنصر خط زمني من الجانب (animation-range: 30% 40%)
• المعلم 3: تظهر فقاعة اقتباس (animation-range: 50% 60%)

من خلال تحديد النطاقات بعناية، يمكنك إنشاء تجربة سردية متماسكة وتفاعلية، توجه انتباه المستخدم عبر أجزاء مختلفة من المحتوى أثناء التمرير.

.milestone-1-graphic {\n  animation: rotateExpand 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 10% 20%;\n}\n.milestone-2-timeline {\n  animation: slideIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 40%;\n}\n/* ... وهكذا ... */\n

يسمح هذا المستوى من التحكم بتجارب سرد قصص مخصصة للغاية وذات علامة تجارية تلقى صدى لدى جماهير متنوعة.

السرد التفاعلي للقصص

إلى جانب الكشف البسيط، يسهل animation-range السرديات التفاعلية الغنية، التي غالبًا ما تُرى على صفحات هبوط المنتجات أو المحتوى التحريري. يمكن للعناصر أن تنمو أو تتقلص أو تغير لونها أو حتى تتحول إلى أشكال مختلفة أثناء تمرير المستخدم عبر قصة.

فكر في صفحة إطلاق منتج. أثناء تمرير المستخدم لأسفل، قد تدور صورة المنتج ببطء لتكشف عن زوايا مختلفة، بينما يتلاشى نص الميزات بجانبها. هذا النهج متعدد الطبقات يبقي المستخدمين متفاعلين ويوفر طريقة ديناميكية لتقديم المعلومات دون الحاجة إلى فيديو كامل.

التحكم الدقيق الذي يوفره animation-range يسمح للمصممين والمطورين بتصميم هذه التجارب تمامًا كما هو مقصود، مما يضمن تدفقًا سلسًا ومقصودًا للمستخدم، بغض النظر عن سرعة التمرير.

إعداد الرسوم المتحركة المستندة إلى التمرير

يتضمن تنفيذ الرسوم المتحركة المستندة إلى التمرير في CSS باستخدام animation-range بضع خطوات رئيسية. دعنا نمر عبر المكونات الأساسية.

الخطوط الزمنية scroll() و view() مرة أخرى

قرارك الأول هو أي خط زمني للتمرير ستربط به الرسوم المتحركة:

• scroll(): هذا مثالي للرسوم المتحركة التي تستجيب للتمرير العام للمستند أو تمرير حاوية معينة.
• الصيغة: scroll([ || ]?)
  على سبيل المثال، scroll(root) للتمرير الرئيسي للمستند، scroll(self) لحاوية تمرير العنصر نفسه، أو scroll(my-element-id y) للتمرير العمودي لعنصر مخصص.
• view(): هذا هو الأفضل للرسوم المتحركة التي يتم تشغيلها بواسطة رؤية العنصر داخل حاوية التمرير الخاصة به (عادةً منفذ العرض).
• الصيغة: view([ || ]?)
  على سبيل المثال، view() للخط الزمني الافتراضي لمنفذ العرض، أو view(block) للرسوم المتحركة المرتبطة برؤية المحور الرأسي. يمكنك أيضًا تسمية خط زمني للعرض باستخدام view-timeline-name على العنصر الأصل/السلف.

بشكل حاسم، يجب تطبيق animation-timeline على العنصر الذي تريد تحريكه، وليس بالضرورة على حاوية التمرير نفسها (إلا إذا كان هذا العنصر *هو* حاوية التمرير).

تحديد الرسوم المتحركة باستخدام @keyframes

يتم تحديد التغييرات المرئية للرسوم المتحركة باستخدام قواعد @keyframes القياسية. ما يختلف هو كيفية ربط هذه الإطارات الرئيسية بالخط الزمني للتمرير.

عندما يتم ربط رسوم متحركة بخط زمني للتمرير، لم تعد النسب المئوية داخل @keyframes (من 0% إلى 100%) تمثل الوقت. بدلاً من ذلك، تمثل التقدم عبر animation-range المحدد. إذا كان animation-range الخاص بك هو 20% 80%، فإن 0% في @keyframes الخاص بك يتوافق مع 20% من الخط الزمني للتمرير، و 100% في @keyframes الخاص بك يتوافق مع 80% من الخط الزمني للتمرير.

هذا تحول مفاهيمي قوي: تحدد إطاراتك الرئيسية التسلسل الكامل للرسوم المتحركة، ويقوم animation-range بقص وتعيين هذا التسلسل على جزء تمرير محدد.

تطبيق animation-timeline و animation-range

دعنا نجمع كل ذلك معًا بمثال عملي: عنصر يتوسع قليلاً عندما يصبح مرئيًا بالكامل في منفذ العرض، ثم يتقلص مرة أخرى عند مغادرته.

بنية HTML:

\n  \n  
مرحباً بالعالم
\n  \n

تنسيق CSS:

.animated-element {\n  height: 200px;\n  width: 200px;\n  background-color: lightblue;\n  margin: 500px auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 1.5em;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n\n  /* الخصائص الرئيسية للرسوم المتحركة المستندة إلى التمرير */\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view(); /* تتقدم الرسوم المتحركة مع دخول/خروج هذا العنصر من العرض */\n  animation-range: entry 20% cover 80%; /* تعمل الرسوم المتحركة من عندما يكون 20% من العنصر مرئيًا حتى يغطي 80% منه العرض */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(0.8); opacity: 0; }\n  50% { transform: scale(1.1); opacity: 1; } /* ذروة التكبير والشفافية عند منتصف النطاق النشط تقريبًا */\n  100% { transform: scale(0.9); opacity: 1; }\n}

في هذا المثال:

• animation-timeline: view() يضمن أن الرسوم المتحركة مدفوعة برؤية .animated-element في منفذ العرض.
• animation-range: entry 20% cover 80% يحدد المنطقة النشطة للرسوم المتحركة: يبدأ عندما يكون العنصر بنسبة 20% داخل منفذ العرض (من حافته الأمامية) ويستمر حتى يغطي 80% من العنصر منفذ العرض (من حافته الأمامية).
• تحدد @keyframes scaleOnView التحويل. 0% من الإطارات الرئيسية يرتبط بـ entry 20% من الخط الزمني للعرض، و 50% من الإطارات الرئيسية يرتبط بنقطة المنتصف لنطاق `entry 20%` إلى `cover 80%`، و 100% يرتبط بـ cover 80%.
• لا تزال animation-duration: 1s و animation-fill-mode: forwards ذات صلة. تعمل المدة كـ "مضاعف سرعة"؛ مدة أطول تجعل الرسوم المتحركة تبدو أبطأ ضمن نطاقها لمسافة تمرير معينة. يضمن forwards استمرار الحالة النهائية للرسوم المتحركة.

يوفر هذا الإعداد طريقة قوية وبديهية بشكل لا يصدق للتحكم في الرسوم المتحركة المستندة إلى التمرير في CSS فقط.

التقنيات المتقدمة والاعتبارات

إلى جانب الأساسيات، يتكامل animation-range بسلاسة مع خصائص الرسوم المتحركة الأخرى في CSS ويتطلب مراعاة الأداء والتوافق.

دمج animation-range مع animation-duration و animation-fill-mode

بينما لا تحتوي الرسوم المتحركة المستندة إلى التمرير على "مدة" ثابتة بالمعنى التقليدي (لأنها تعتمد على سرعة التمرير)، لا يزال animation-duration يلعب دورًا حاسمًا. يحدد "المدة المستهدفة" لإكمال الرسوم المتحركة تسلسل الإطارات الرئيسية بالكامل إذا كانت تعمل بسرعة "عادية" على نطاقها المحدد.

• animation-duration أطول يعني أن الرسوم المتحركة ستبدو أبطأ على animation-range المحدد.
• animation-duration أقصر يعني أن الرسوم المتحركة ستبدو أسرع على animation-range المحدد.

يظل animation-fill-mode أيضًا حاسمًا. يُستخدم forwards بشكل شائع لضمان استمرار الحالة النهائية للرسوم المتحركة بمجرد اجتياز animation-range النشط. بدونه، قد يعود العنصر فجأة إلى حالته الأصلية بمجرد تمرير المستخدم خارج النطاق المحدد.

على سبيل المثال، إذا كنت تريد أن يظل العنصر متلاشيًا بعد دخوله منفذ العرض، فإن animation-fill-mode: forwards ضروري.

التعامل مع رسوم متحركة متعددة على عنصر واحد

يمكنك تطبيق رسوم متحركة متعددة مستندة إلى التمرير على عنصر واحد. يتم تحقيق ذلك من خلال توفير قائمة من القيم مفصولة بفواصل لـ animation-name و animation-timeline و animation-range (وخصائص الرسوم المتحركة الأخرى).

على سبيل المثال، يمكن لعنصر أن يتلاشى أثناء دخوله العرض ويدور أثناء تغطيته للعرض في نفس الوقت:

.multi-animated-item {\n  animation-name: fadeIn, rotateItem;\n  animation-duration: 1s, 2s;\n  animation-timeline: view(), view();\n  animation-range: entry 0% cover 50%, cover;\n  animation-fill-mode: forwards, forwards;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rotateItem {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}

يوضح هذا قوة التنسيق الدقيق، مما يسمح بالتحكم في جوانب مختلفة من مظهر العنصر بواسطة أجزاء مختلفة من الخط الزمني للتمرير.

الآثار المترتبة على الأداء

إحدى المزايا الرئيسية للرسوم المتحركة المستندة إلى التمرير في CSS، بما في ذلك animation-range، هي فوائدها الكامنة في الأداء. عن طريق نقل منطق ربط التمرير من JavaScript إلى محرك عرض المتصفح:

• تفريغ الخيط الرئيسي: يمكن تشغيل الرسوم المتحركة على خيط التركيب، مما يحرر خيط JavaScript الرئيسي للمهام الأخرى، مما يؤدي إلى تفاعلات أكثر سلاسة.
• العرض المحسّن: تم تحسين المتصفحات بشكل كبير للرسوم المتحركة والتحويلات في CSS، وغالبًا ما تستفيد من تسريع GPU.
• تقليل التقطع: يمكن أن يقلل الاعتماد الأقل على JavaScript لأحداث التمرير بشكل كبير من "التقطع" (التأتأة أو عدم السلاسة) الذي يمكن أن يحدث عند زيادة تحميل مستمعي أحداث التمرير.

يترجم هذا إلى تجربة مستخدم أكثر سلاسة واستجابة، وهو أمر حاسم بشكل خاص للجماهير العالمية التي تصل إلى مواقع الويب على مجموعة متنوعة من الأجهزة وظروف الشبكة.

توافق المتصفحات

اعتبارًا من أواخر عام 2023 / أوائل عام 2024، يتم دعم الرسوم المتحركة المستندة إلى التمرير في CSS (بما في ذلك animation-timeline و animation-range) بشكل أساسي في المتصفحات المستندة إلى Chromium (Chrome، Edge، Opera، Brave، إلخ).

الوضع الحالي:

• Chrome: مدعوم بالكامل (منذ Chrome 115)
• Edge: مدعوم بالكامل
• Firefox: قيد التطوير / خلف العلامات
• Safari: قيد التطوير / خلف العلامات

استراتيجيات الحلول البديلة:

• استعلامات الميزات (@supports): استخدم @supports (animation-timeline: scroll()) لتطبيق الرسوم المتحركة المستندة إلى التمرير فقط عند دعمها. قدم حلاً بديلاً أبسط، غير متحرك أو قائم على JavaScript للمتصفحات غير المدعومة.
• التحسين التدريجي: صمم المحتوى الخاص بك ليكون متاحًا ومفهومًا بالكامل حتى بدون هذه الرسوم المتحركة المتقدمة. يجب أن تعزز الرسوم المتحركة تجربة المستخدم، لا أن تكون حاسمة لها.

نظرًا للتطور السريع لمعايير الويب، توقع دعمًا أوسع للمتصفحات في المستقبل القريب. يوصى بمراقبة موارد مثل Can I Use... للحصول على أحدث معلومات التوافق.

تصحيح أخطاء الرسوم المتحركة المستندة إلى التمرير

يمكن أن يكون تصحيح أخطاء هذه الرسوم المتحركة تجربة جديدة. تتطور أدوات مطوري المتصفحات الحديثة، خاصة في Chromium، لتقديم دعم ممتاز:

• علامة تبويب الرسوم المتحركة: في أدوات مطوري Chrome، تعد علامة التبويب "Animations" لا تقدر بثمن. تعرض جميع الرسوم المتحركة النشطة، وتسمح لك بإيقافها مؤقتًا وإعادتها والتنقل خلالها. بالنسبة للرسوم المتحركة المستندة إلى التمرير، غالبًا ما توفر تمثيلًا مرئيًا للخط الزمني للتمرير والنطاق النشط.
• لوحة العناصر: سيؤدي فحص العنصر في لوحة "Elements" والنظر إلى علامة التبويب "Styles" إلى إظهار خصائص animation-timeline و animation-range المطبقة.
• تراكب الخط الزمني للتمرير: تقدم بعض المتصفحات تراكبًا تجريبيًا لتصور الخط الزمني للتمرير مباشرة على الصفحة، مما يساعد على فهم كيفية ارتباط موضع التمرير بتقدم الرسوم المتحركة.

سيؤدي التعرف على هذه الأدوات إلى تسريع عملية التطوير والتحسين بشكل كبير.

أفضل الممارسات للتنفيذ العالمي

بينما يوفر animation-range حرية إبداعية لا تصدق، فإن التنفيذ المسؤول هو مفتاح ضمان تجربة إيجابية للمستخدمين من جميع الخلفيات والأجهزة على مستوى العالم.

اعتبارات إمكانية الوصول

يمكن أن تكون الحركة مربكة أو حتى ضارة لبعض المستخدمين، خاصة أولئك الذين يعانون من اضطرابات دهليزية أو دوار الحركة. ضع في اعتبارك دائمًا:

• استعلام الوسائط prefers-reduced-motion: احترم تفضيلات المستخدم. بالنسبة للمستخدمين الذين قاموا بتمكين "تقليل الحركة" في إعدادات نظام التشغيل الخاص بهم، يجب تخفيف الرسوم المتحركة بشكل كبير أو إزالتها تمامًا.

@media (prefers-reduced-motion) {\n  .animated-element {\n    animation: none !important; /* تعطيل الرسوم المتحركة */\n    transform: none !important; /* إعادة تعيين التحويلات */\n    opacity: 1 !important; /* ضمان الرؤية */\n  }\n}

هذه ممارسة أساسية لإمكانية الوصول لجميع الرسوم المتحركة، بما في ذلك تلك المستندة إلى التمرير.

• تجنب الحركة المفرطة: حتى عند تمكينها، تجنب الحركات المزعجة أو السريعة أو واسعة النطاق التي يمكن أن تكون مشتتة أو غير مريحة. غالبًا ما تكون الرسوم المتحركة الدقيقة أكثر فاعلية.
• ضمان الوضوح: تأكد من أن النص والمحتوى الهام يظلان قابلين للقراءة طوال الرسوم المتحركة. تجنب تحريك النص بطريقة تجعله غير مقروء أو تسبب وميضًا.

التصميم المتجاوب

تحتاج الرسوم المتحركة إلى أن تبدو وتعمل بشكل جيد عبر مجموعة من الأجهزة، من شاشات سطح المكتب الكبيرة إلى الهواتف المحمولة الصغيرة. ضع في اعتبارك:

• القيم المستندة إلى منفذ العرض: يمكن أن يساعد استخدام الوحدات النسبية مثل النسب المئوية و vw و vh للتحويلات أو تحديد المواقع داخل الإطارات الرئيسية في توسيع نطاق الرسوم المتحركة برشاقة.
• استعلامات الوسائط لنطاق الرسوم المتحركة: قد ترغب في قيم animation-range مختلفة أو حتى رسوم متحركة مختلفة تمامًا بناءً على حجم الشاشة. على سبيل المثال، قد يتم تبسيط سرد معقد يعتمد على التمرير للأجهزة المحمولة حيث تكون مساحة الشاشة والأداء أكثر تقييدًا.
• الاختبار عبر الأجهزة: اختبر دائمًا الرسوم المتحركة المستندة إلى التمرير على أجهزة حقيقية أو باستخدام محاكاة قوية للأجهزة في أدوات المطورين لاكتشاف أي اختناقات في الأداء أو مشكلات في التخطيط.

التحسين التدريجي

كما ذكرنا في توافق المتصفحات، تأكد من أن المحتوى والوظائف الأساسية الخاصة بك لا تعتمد أبدًا على هذه الرسوم المتحركة المتقدمة. يجب أن يظل لدى المستخدمين على المتصفحات القديمة أو أولئك الذين لديهم إعدادات حركة منخفضة تجربة كاملة ومرضية. الرسوم المتحركة هي تحسين وليست شرطًا.

وهذا يعني هيكلة HTML و CSS الخاصين بك بحيث يكون المحتوى صحيحًا دلاليًا وجذابًا بصريًا حتى لو لم يتم تحميل أي JavaScript أو رسوم متحركة CSS متقدمة.

تحسين الأداء

بينما تكون رسوم CSS المتحركة الأصلية عالية الأداء، إلا أن الخيارات السيئة لا تزال تؤدي إلى مشاكل:

• تحريك transform و opacity: هذه الخصائص مثالية للرسوم المتحركة حيث يمكن غالبًا التعامل معها بواسطة خيط التركيب، متجنبةً أعمال التخطيط والطلاء. تجنب تحريك خصائص مثل width، height، margin، padding، top، left، right، bottom إن أمكن، حيث يمكن أن تؤدي إلى إعادة حسابات تخطيط مكلفة.
• الحد من التأثيرات المعقدة: على الرغم من أنها مغرية، تجنب تطبيق الكثير من الرسوم المتحركة المعقدة والمتزامنة المستندة إلى التمرير، خاصة على عناصر متعددة في وقت واحد. ابحث عن توازن بين الثراء البصري والأداء.
• استخدام تسريع الأجهزة: يمكن لخصائص مثل transform: translateZ(0) (على الرغم من أنها لم تعد ضرورية بشكل صريح مع المتصفحات الحديثة ورسوم transform) أن تساعد أحيانًا في فرض العناصر على طبقات تركيب خاصة بها، مما يعزز الأداء بشكل أكبر.

أمثلة واقعية وإلهامات

لترسيخ فهمك بشكل أكبر وإلهام مشروعك القادم، دعنا نتصور بعض التطبيقات الواقعية لـ animation-range:

• التقارير السنوية للشركات: تخيل تقريرًا سنويًا تفاعليًا حيث تظهر الرسوم البيانية المالية متحركة، وتتزايد مؤشرات الأداء الرئيسية (KPIs)، ويتم تمييز معالم الشركة بإشارات بصرية دقيقة أثناء تمرير المستخدم عبر المستند. يمكن أن يكون لكل قسم animation-range خاص به، مما يخلق تجربة قراءة موجهة.
• عروض المنتجات (التجارة الإلكترونية): في صفحة تفاصيل منتج لجهاز جديد، يمكن أن تدور صورة المنتج الرئيسية ببطء أو تكبر أثناء تمرير المستخدم، كاشفة عن الميزات طبقة تلو الأخرى. يمكن أن تظهر صور الملحقات بالتسلسل عندما تصبح أوصافها مرئية. هذا يحول صفحة ثابتة إلى استكشاف ديناميكي.
• منصات المحتوى التعليمي: للمفاهيم العلمية المعقدة أو الجداول الزمنية التاريخية، يمكن للرسوم المتحركة المستندة إلى التمرير أن توضح العمليات. يمكن أن يبني رسم بياني نفسه قطعة قطعة، أو يمكن لخريطة تاريخية أن تظهر حركات القوات، كل ذلك متزامن مع عمق تمرير المستخدم. هذا يسهل الفهم والاحتفاظ بالمعلومات.
• مواقع الفعاليات: يمكن لموقع مهرجان أن يعرض "كشفًا عن المشاركين" حيث تظهر صور وأسماء الفنانين فقط عندما يصبح قسمهم بارزًا. يمكن لقسم الجدول الزمني أن يسلط الضوء على الفترة الزمنية الحالية بتغيير طفيف في الخلفية أثناء مرور المستخدم.
• معارض الأعمال الفنية: يمكن للفنانين استخدام animation-range لإنشاء عروض فريدة لأعمالهم، حيث يتم الكشف عن كل قطعة برسوم متحركة مخصصة مصممة حسب أسلوبها، مما يخلق تجربة تصفح فنية لا تُنسى.

تسلط هذه الأمثلة الضوء على تعدد استخدامات وقوة التعبير لـ animation-range. من خلال التفكير الإبداعي في كيفية قيادة التمرير للسرد وكشف المحتوى، يمكن للمطورين صياغة تجارب رقمية فريدة وجذابة تبرز في مشهد عبر الإنترنت مزدحم.

الخاتمة

يمثل نطاق الرسوم المتحركة في CSS، إلى جانب animation-timeline، قفزة كبيرة إلى الأمام في قدرات الرسوم المتحركة الأصلية على الويب. إنه يوفر لمطوري الواجهة الأمامية مستوى غير مسبوق من التحكم التعريفي في التأثيرات المستندة إلى التمرير، ناقلاً التفاعلات المتطورة من عالم مكتبات JavaScript المعقدة إلى مجال CSS النقي الأكثر أداءً وقابلية للصيانة.

من خلال تحديد نقاط البداية والنهاية للرسوم المتحركة بدقة على خط زمني للتمرير، يمكنك تنسيق تأثيرات parallax مذهلة، وكشف محتوى جذاب، ومؤشرات تقدم ديناميكية، وسرديات معقدة متعددة المراحل. تجعل فوائد الأداء، إلى جانب أناقة حلول CSS الأصلية، هذه إضافة قوية إلى مجموعة أدوات أي مطور.

بينما لا يزال دعم المتصفحات في طور التوحيد، تضمن استراتيجية التحسين التدريجي أنه يمكنك البدء في تجربة وتنفيذ هذه الميزات اليوم، وتوفير تجارب متطورة للمستخدمين على المتصفحات الحديثة مع توفير حلول بديلة أنيقة للآخرين.

الويب هو لوحة قماشية دائمة التطور. احتضن نطاق الرسوم المتحركة في CSS لرسم تجارب مستخدم أكثر حيوية وتفاعلية وأداءً. ابدأ في التجربة، وابنِ أشياء مذهلة، وساهم في عالم رقمي أكثر ديناميكية وجاذبية للجميع.