Tạo hoạt ảnh khi cuộn

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 19 trên 27.

Đôi khi, chúng ta muốn các phần tử chạy hiệu ứng (mờ dần, trượt vào, phóng to, v.v.) khi chúng xuất hiện trong vùng hiển thị lúc cuộn trang.
Ta thường kiểm tra xem phần tử có hiển thị trên màn hình hay không, rồi thêm một lớp để kích hoạt hiệu ứng hoạt ảnh hoặc chuyển tiếp CSS.

Trước tiên, hãy tạo một phần tử HTML đơn giản:

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

Tiếp theo, thêm CSS cho hiệu ứng chuyển động:

.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);
}

Bây giờ, hãy tạo một hàm (function) JavaScript để phát hiện khi các phần tử cuộn vào vùng nhìn thấy. Vì có thể có nhiều phần tử, ta lặp qua chúng bằng forEach và kiểm tra vị trí của từng phần tử so với khung nhìn.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Lấy vị trí của phần tử (element) so với vùng hiển thị
    const position = element.getBoundingClientRect();
    
    // Nếu phần tử nằm trong vùng hiển thị
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Chạy khi cuộn trang
window.addEventListener('scroll', checkScroll);

// Chạy một lần khi tải trang
checkScroll();

Khi một phần tử có lớp animate-on-scroll đi vào vùng hiển thị, script thêm lớp visible, kích hoạt hiệu ứng hoạt ảnh.

Thử thách

Dễ

Bên trong vòng lặp, hãy tạo một câu lệnh if.

Điều kiện cần kiểm tra xem vị trí trên cùng của phần tử có nhỏ hơn window.innerHeight - 50 hay không.
Nếu điều kiện đúng, dùng .classList.add("active") để thêm lớp active vào phần tử đó.

Nhờ vậy, mỗi khi một phần tử cuộn vào khung nhìn (cách cạnh dưới màn hình trong phạm vi 50px), phần tử đó sẽ mờ dần hiện ra một cách mượt mà.

Tự làm thử

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