【JavaScript】スクロール時に要素を表示する。上下左右。フェードイン・フェードアウト。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript で要素をフェードイン・フェードアウトで上下左右をのバージョンを作ってみました。
過去に表示・非表示の記事は書いたことがあったので、それを応用です。

HTMLです。【JavaScript】スクロール時に要素を表示する。上下左右。フェードイン・フェードアウト。


<!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="style.css">
</head>

<body>
  <ul>
    <li class="animation_top"><img src="images/macaron01.png" alt="macaron01"></li>
    <li class="animation_top"><img src="images/macaron02.png" alt="macaron02"></li>
    <li class="animation_top"><img src="images/macaron03.png" alt="macaron03"></li>
    <li class="animation_right"><img src="images/macaron01.png" alt="macaron01"></li>
    <li class="animation_bottom"><img src="images/macaron02.png" alt="macaron02"></li>
    <li class="animation_left"><img src="images/macaron03.png" alt="macaron03"></li>
  </ul>

  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】スクロール時に要素を表示する。上下左右。フェードイン・フェードアウト。


img {
  width: 100%;
  height: auto;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 500px;
  margin: 0 auto;
  padding: 50px 25px;
}
li {
  width: 100%;
  margin: 0 0 100px;
  list-style: none;
}
.animation_top {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(-300px);
}
.animation_right {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateX(300px);
}
.animation_bottom {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(300px);
}
.animation_left {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateX(-300px);
}
.active { /* js クラスを追加 */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

JavaScriptです。【JavaScript】スクロール時に要素を表示する。上下左右。フェードイン・フェードアウト。


const animationTop = document.querySelectorAll(".animation_top");
const animationRight = document.querySelectorAll(".animation_right");
const animationBottom = document.querySelectorAll(".animation_bottom");
const animationLeft = document.querySelectorAll(".animation_left");
let offset = 100; // アニメーションのタイミング

window.addEventListener("scroll", () => {
  let scroll = window.scrollY; // スクロール量を取得
  let height = window.innerHeight; // 画面の高さを取得

  for (animation of animationTop) {
    let position = animation.getBoundingClientRect().top + scroll; // アニメーションのさせたい位置を取得
    if (scroll > position - height + offset) {
      animation.classList.add("active");
    } else {
      animation.classList.remove("active");
    }    
  }

  for (animation of animationRight) {
    let position = animation.getBoundingClientRect().top + scroll; // アニメーションのさせたい位置を取得
    if (scroll > position - height + offset) {
      animation.classList.add("active");
    } else {
      animation.classList.remove("active");
    }    
  }
  
  for (animation of animationBottom) {
    let position = animation.getBoundingClientRect().top + scroll; // アニメーションのさせたい位置を取得
    if (scroll > position - height + offset) {
      animation.classList.add("active");
    } else {
      animation.classList.remove("active");
    }    
  }

  for (animation of animationLeft) {
    let position = animation.getBoundingClientRect().top + scroll; // アニメーションのさせたい位置を取得
    if (scroll > position - height + offset) {
      animation.classList.add("active");
    } else {
      animation.classList.remove("active");
    }    
  }

});