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

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 19 من 27.

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

أولاً، لنقم بإنشاء عنصر HTML بسيط:

<div class="animate-on-scroll">This element will animate when scrolled into view</div>

بعد ذلك، أضف CSS للرسوم المتحركة:

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

الآن، لنقم بإنشاء دالة JavaScript لاكتشاف متى تظهر العناصر عند التمرير. بما أنه قد يكون لدينا عناصر متعددة، فسنقوم بالمرور عليها باستخدام forEach والتحقق من موضع كل عنصر بالنسبة لمنطقة العرض (viewport).

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // الحصول على موضع العنصر بالنسبة لمنطقة العرض
    const position = element.getBoundingClientRect();
    
    // إذا كان العنصر في منطقة العرض
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// التشغيل عند التمرير
window.addEventListener('scroll', checkScroll);

// التشغيل مرة واحدة عند تحميل الصفحة
checkScroll();

عندما يدخل عنصر يحمل الفئة animate-on-scroll منطقة العرض (viewport)، يضيف السكربت الفئة visible، مما يؤدي إلى تشغيل الحركة.

التحدي

سهل

داخل الحلقة التكرارية، قم بإنشاء if statement.

يجب أن يتحقق الشرط مما يلي: إذا كان top position للعنصر أقل من window.innerHeight - 50.
إذا كان الشرط صحيحاً، استخدم .classList.add("active") لإضافة الفئة active إلى ذلك العنصر.

بهذه الطريقة، كلما ظهر عنصر أثناء التمرير (ضمن مسافة 50px من أسفل الشاشة)، سيظهر بتأثير التلاشي (fade in) بسلاسة.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Animation Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Discover the Beauty of Nature</h1>
    <p>Scroll down to reveal the magic</p>
  </header>

  <div class="container">
    <div class="fade-in card">
      <h2>Mountains</h2>
      <p>Standing tall and timeless, mountains remind us of strength and stability.</p>
    </div>

    <div class="fade-in card">
      <h2>Forests</h2>
      <p>Forests are the lungs of our planet, offering peace and endless green beauty.</p>
    </div>

    <div class="fade-in card">
      <h2>Rivers</h2>
      <p>Calm or powerful, rivers flow endlessly, connecting life along their paths.</p>
    </div>

    <div class="fade-in card">
      <h2>Deserts</h2>
      <p>Silent and vast, deserts teach us resilience and the value of every drop of water.</p>
    </div>

    <div class="fade-in card">
      <h2>Oceans</h2>
      <p>The oceans cover most of our Earth, a mysterious world full of wonder and life.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>