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

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