【JavaScript】スクロールで要素をアニメーションさせながら表示

2023年11月09日

WEBサイト制作

#備忘録
#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、使う場面が非常に多いスクロールで要素を表示させる方法についてご紹介します。
要素がアニメーションしながら出現するので、ユーザーの目に止まりやすい効果があります。
キャンペーンページ以外にも、普通にコーポレートサイトでもよく見かけますよね。

実装例

HTML例

<ul>
    <li class="js-target js-slidein"><img src="/cp/wp/wp-content/uploads/2023/11/24337897.png" alt=""></li>
    <li class="js-target js-jumpin"><img src="/cp/wp/wp-content/uploads/2023/11/23425133.png" alt=""></li>
    <li class="js-target js-ghost"><img src="/cp/wp/wp-content/uploads/2023/11/24364785.png" alt=""></li>
</ul>

CSS例

ul{
    list-style: none;
}
.js-target img{
    width: 100%;
}
.js-target{
    width: 200px;
    margin: 0 auto 50px;
    opacity: 0;
}
.js-slidein{
    position: relative;
    left: -60px;
    transition: .4s;
}
.is-slidein{
    left: 0;
    opacity: 1;
}
@keyframes jumpin {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-60px);
  }
  100% {
    transform: translateY(0px);
  }
}
.is-jumpin{
  animation: jumpin .6s ease-in-out;
  opacity: 1;
}
@keyframes ghost {
  0% {
    transform: translate(60px,60px);
  }
  33% {
    transform: translate(-60px,40px);
  }
  66%{
    transform: translate(60px,20px);
  }
  100% {
    transform: translate(0px,0px);
  }
}
.is-ghost{
  animation: ghost 3s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 1;
}

キーフレームを使ってアニメーションさせてます。

JavaScript例

window.addEventListener('scroll', function() {
    let scTop = window.scrollY;
    let EffectH = 300;
    let scBottom = scTop + window.innerHeight;
    let effectPos = scBottom - EffectH;
    let jsTarget = document.querySelectorAll('.js-target')
  jsTarget.forEach(function(element) {
    let thisPos = element.offsetTop;
    if (thisPos < effectPos) {
        if (element.classList.contains("js-slidein")) {
            element.classList.add('is-slidein');
        }else if(element.classList.contains("js-jumpin")){
            element.classList.add('is-jumpin');
        }else{
            element.classList.add('is-ghost');
        }
    }
  });
});