إعداد الرسوم المتحركة المرتبطة بالتمرير
تشغيل رسوم CSS المتحركة عند دخول العناصر إلى إطار العرض
إعداد الرسوم المتحركة المرتبطة بالتمرير درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
الهدف
تعمل الرسوم المتحركة المرتبطة بالتمرير أو تتوقف أو تنعكس استنادًا إلى مدى ظهور العنصر. ومن أمثلتها: تلاشي قسم hero عند ظهوره أثناء التمرير، أو عدّاد يزداد عندما يصبح مرئيًا، أو تأثير parallax مرتبط بموضع التمرير. يطلق IntersectionObserver الرسوم المتحركة، بينما يشغّلها CSS أو Web Animations API.
الرسوم المتحركة المعتمدة على المشغلات
النمط الأبسط هو إضافة فئة CSS تحتوي على الرسم المتحرك عندما يدخل العنصر إلى إطار العرض. أضف entry.target.classList.add("in-view") في دالة استدعاء المراقب، ثم عرّف الفئة باستخدام animation: fade-in 600ms forwards.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}إعداد المراقب
أنشئ مراقبًا مشتركًا، وراقب كل عنصر يحمل فئة المشغّل، وأضف "in-view" عند حدوث التقاطع، ثم أوقف مراقبة العنصر لتجنب تشغيل الرسم المتحرك مجددًا. بالنسبة إلى الرسوم المتحركة التي تعمل مرة واحدة، فهذا كل ما تحتاج إليه؛ أما إذا أردت تشغيلها مجددًا عند دخول العنصر مرة أخرى، فلا توقف مراقبته وأزل الفئة عند خروجه.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));تأثيرات التتابع
لإظهار عناصر القائمة بالتتابع، طبّق تأخيرًا خاصًا بكل عنصر باستخدام خاصية CSS مخصّصة: style="--delay: ${i * 100}ms" على كل عنصر؛ ثم يقرأ الرسم المتحرك animation-delay: var(--delay). تتحرك العناصر بتتابع متدرج عند دخول القائمة إلى إطار العرض.
عتبة التشغيل المبكر
يُشغّل threshold: 0.2 الاستدعاء عند ظهور 20% من العنصر — وهي عادةً لحظة مناسبة لرسوم "in-view" المتحركة. أما threshold: 0 فيُشغّلها مبكرًا جدًا، عند ظهور أي بكسل، فتبدو مفاجئة؛ بينما يُشغّل threshold: 1 الرسم متأخرًا جدًا، بعد ظهور العنصر بالكامل، فيبدو التنفيذ بطيئًا.
الرسوم المرتبطة بالتمرير مقابل المشغلة بالتمرير
تعمل الرسوم المتحركة المشغلة بالتمرير مرة واحدة عند حدوث التقاطع، كما شرحنا أعلاه. أما الرسوم المتحركة المرتبطة بالتمرير، فتتقدم بمعدل متزامن تمامًا مع موضع التمرير. والطريقة الحديثة لذلك هي الرسوم المتحركة المعتمدة على التمرير في CSS باستخدام (animation-timeline: scroll())، مع بقاء IntersectionObserver مفيدًا عند دخول مناطق التشغيل أو الخروج منها.
تجنب اضطراب التخطيط
حرّك الخصائص التي تستطيع وحدة GPU تحويلها بكفاءة، مثل transform وopacity. وتجنب تحريك top وleft وwidth وheight، لأنها تؤدي إلى إعادة التخطيط في كل إطار، مما يسبب تقطع الرسوم المتحركة المرتبطة بالتمرير على الأجهزة المتوسطة الأداء.
احترام تقليل الحركة
ضع تعريفات الرسوم المتحركة داخل @media (prefers-reduced-motion: no-preference) حتى يحصل المستخدمون الذين يطلبون تقليل الحركة، مثل المصابين باضطرابات الجهاز الدهليزي أو الحساسية للحركة، على الحالة النهائية الثابتة دون حركة. ويجب تعطيل الرسوم المتحركة الزخرفية بالكامل عند تفعيل تقليل الحركة.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}نمط الأداء
استخدم مراقبًا مشتركًا واحدًا بدلًا من إنشاء مراقب لكل عنصر. أوقف المراقبة بعد تشغيل الرسم المتحرك لمرة واحدة. استخدم will-change باعتدال — على العناصر التي تتحرك حاليًا فقط، وأزله عند انتهاء الرسم المتحرك. راقب لوحة Performance لاكتشاف الإطارات المتساقطة.
الرسوم المتحركة ثنائية الاتجاه
بالنسبة إلى الرسوم المتحركة التي ينبغي أن تنعكس عند خروج العنصر من إطار العرض، لا توقف المراقبة. بدّل الفئة في دالة الاستدعاء استنادًا إلى isIntersecting باستخدام: entry.target.classList.toggle("in-view", entry.isIntersecting). يعمل الرسم المتحرك إلى الأمام عند الدخول، وينعكس عند الخروج.
الدمج مع Web Animations API
بالنسبة إلى الرسوم المتحركة التي يديرها JavaScript، استبدل classList.add بالاستدعاء entry.target.animate(keyframes, options). يعيد WAAPI كائن Animation يمكنك إيقافه مؤقتًا أو عكسه أو ربطه بوعود متسلسلة، وهو أكثر مرونة من CSS عند إنشاء تسلسلات معقدة.
اختبار المعرفة
لماذا يُفضّل تحريك transform وopacity بدلًا من top وleft وwidth وheight في الرسوم المتحركة المرتبطة بالتمرير؟
ملخص
تجمع الرسوم المتحركة المرتبطة بالتمرير بين IntersectionObserver وفئات الرسوم المتحركة في CSS أو WAAPI. حدّد حالة مخفية، وأضف "in-view" عند حدوث التقاطع، وحرّك transform وopacity بدلًا من top وleft، واحترم prefers-reduced-motion، واستخدم خصائص CSS المخصّصة لإضافة تأخيرات متتابعة تؤدي إلى ظهور العناصر بالتدرج. وللحصول على رسوم متحركة كاملة تتبع تقدم التمرير، فكّر في الرسوم المتحركة الأصلية المعتمدة على التمرير باستخدام (animation-timeline: scroll()).
الأسئلة الشائعة
هل درس «إعداد الرسوم المتحركة المرتبطة بالتمرير» مجاني؟
نعم — نص درس «إعداد الرسوم المتحركة المرتبطة بالتمرير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «إعداد الرسوم المتحركة المرتبطة بالتمرير»؟
تشغيل رسوم CSS المتحركة عند دخول العناصر إلى إطار العرض تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «إعداد الرسوم المتحركة المرتبطة بالتمرير»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- IntersectionObserver API والعتبات
- التحميل الكسول باستخدام IntersectionObserver
- تنفيذ التمرير اللانهائي
- إعداد الرسوم المتحركة المرتبطة بالتمرير