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

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript で要素をフェードイン・フェードアウトさせたいと思います。
だいたい検索したら、JavaScript と書いているにも関わらず、jQuery 使っているサイトが多いですね。
それだと、jQuery 読み込まないと動作しないので、初見者はコピペしても対応できなかったりする。

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"><img src="images/macaron01.png" alt="macaron01"></li>
    <li class="animation"><img src="images/macaron02.png" alt="macaron02"></li>
    <li class="animation"><img src="images/macaron03.png" alt="macaron03"></li>
    <li class="animation"><img src="images/macaron01.png" alt="macaron01"></li>
    <li class="animation"><img src="images/macaron02.png" alt="macaron02"></li>
    <li class="animation"><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 {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px);
}
.active { /* js クラスを追加 */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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


let animations = document.querySelectorAll('.animation');
let offset = 100; // アニメーションのタイミング

window.addEventListener('scroll', () => {

  let scroll = window.scrollY; // スクロール量を取得
  let height = window.innerHeight; // 画面の高さを取得

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

});