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

جزء من قسم JavaScript قيد التطبيق في رحلة HTML على Coddy. الدرس 19 من 27.

أحيانًا نريد أن تتحرك العناصر (تتلاشى، أو تنزلق، أو تتكبّر، وما إلى ذلك) عندما تدخل إلى إطار العرض أثناء التمرير.
غالبًا ما يتم ذلك بالتحقق مما إذا كان العنصر ظاهرًا على الشاشة، ثم إضافة فئة تُفعّل حركة أو انتقالًا في 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 ونتحقق من موضع كل عنصر بالنسبة إلى إطار العرض.

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 إلى إطار العرض، يضيف البرنامج النصي الفئة visible، مما يؤدي إلى تشغيل الحركة.

التحدي

سهل

داخل الحلقة، أنشئ عبارة if.

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

بهذه الطريقة، كلما ظهر عنصر في نطاق العرض (على بُعد 50px من أسفل الشاشة)، سيتلاشى ظهوره بسلاسة.

جرّب بنفسك

<!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>