הנפשת אלמנטים בעת גלילה

חלק מהיחידה 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>