スクロールしたらふわっと出るやつの実装

課題

LPとかによくある、スクロールされて画面に入ったらふわっと表示するアニメーションを実装したい。

実装

CSS+JS

tech-dig.jp

.slideup {
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: all 1s;
}
.slideup.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

function showElementAnimation() {
    element = document.getElementsByClassName('slideup');
    if (!element) return;

    var showTiming = window.innerHeight > 768 ? 200 : 80; // 要素が出てくるタイミングはここで調整
    var scrollY = window.pageYOffset; //スクロール量を取得
    var windowH = window.innerHeight; //ブラウザウィンドウのビューポート(viewport)の高さを取得

    for(var i=0;i<element.length;i++) { 
      var elemClientRect = element[i].getBoundingClientRect(); 
      var elemY = scrollY + elemClientRect.top; 
      if(scrollY + windowH - showTiming > elemY) {
        element[i].classList.add('is-show');
      } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
        element[i].classList.remove('is-show');
      }
    }
}

window.addEventListener('scroll', showElementAnimation)