MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. スクロールアニメーション

スクロールアニメーション

JavaScript
2024.05.24

スクロールイベントを監視し、特定の位置に達したときにクラスを追加することでアニメーションを実現します。

スクロールアニメーション
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScriptスクロールアニメーションについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="scroll-container">
      <div class="scroll-item">アイテム 1</div>
      <div class="scroll-item">アイテム 2</div>
      <div class="scroll-item">アイテム 3</div>
    </div>

    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了したら
document.addEventListener("DOMContentLoaded", function () {
  const scrollItems = document.querySelectorAll(".scroll-item");

  const handleScroll = () => {
    scrollItems.forEach((item) => {
      // 要素が画面内に入っているかチェック
      const rect = item.getBoundingClientRect();
      if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
        item.classList.add("in-view");
      } else {
        item.classList.remove("in-view");
      }
    });
  };

  // スクロールイベントを監視
  window.addEventListener("scroll", handleScroll);

  // 初回のスクロールチェック
  handleScroll();
});
#scroll-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.scroll-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  margin: 50px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.scroll-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.scroll-item:nth-child(odd) {
  background-color: #e9ecef;
}

.scroll-item:hover {
  background-color: #dee2e6;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);
}
出力結果
アイテム 1
アイテム 2
アイテム 3
JavaScript