JavaScript Academy · درس

التحريكات الناتجة عن التمرير

حرّكوا العناصر عند دخولها إلى إطار العرض.

التحريكات الناتجة عن التمرير درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

التحريك عند التمرير

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

جانب CSS

حدّد في CSS حالة بدء مخفية وحالة نهاية ظاهرة. ولا يتولى JavaScript سوى تبديل فئة؛ أما الانتقال فهو CSS خالص، مما يحافظ على سلاسة الحركة.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

تحديد العناصر المستهدفة

ضع علامة على العناصر التي تريد تحريكها باستخدام فئة مشتركة، ثم اجمعها.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

إنشاء المراقب

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

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

إضافة الفئة

أضف في دالة الاستدعاء فئة visible إلى العناصر المستهدفة المتقاطعة. وعندها يحرّكها CSS إلى الظهور.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

التحريك مرة واحدة

لإظهار العنصر مرة واحدة، أوقف مراقبته بعد إضافة الفئة حتى لا يعاد تحريكه عند التمرير بعيدًا عنه ثم العودة إليه.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

إعادة التحريك في الاتجاهين

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

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

بدء المراقبة

راقب كل عنصر مستهدف لبدء تتبعه. ويُستدعى المراقب أثناء تمرير المستخدم متجاوزًا كل عنصر.

items.forEach(el => observer.observe(el));

تتابع الرسوم المتحركة

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

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

مراعاة تقليل الحركة

يفضل بعض المستخدمين تقليل الحركة. تحقّق من استعلام الوسائط وتجاوز الرسوم المتحركة لهؤلاء المستخدمين، مع عرض المحتوى فورًا بدلًا من ذلك.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

مكاسب الأداء

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

اختبار سريع

اختبر مدى فهمك للرسوم المتحركة التي يشغّلها التمرير.

مراجعة

لقد نفّذت رسومًا متحركة يشغّلها التمرير:

حدّد الحالات المخفية والظاهرة في CSS.
راقب العناصر المستهدفة باستخدام threshold مناسب.
بدّل فئة عند التقاطع، ودَع CSS يتولى التحريك.
استخدم unobserve لعمليات الإظهار لمرة واحدة.
راعِ prefers-reduced-motion.

لقد أنهيت Intersection Observer. والآن ننتقل إلى Web Workers.

الأسئلة الشائعة

هل درس «التحريكات الناتجة عن التمرير» مجاني؟

نعم — نص درس «التحريكات الناتجة عن التمرير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحريكات الناتجة عن التمرير»؟

حرّكوا العناصر عند دخولها إلى إطار العرض. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التحريكات الناتجة عن التمرير»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy