スクロールした時に下からふわっと文字を出す方法～CSS、jQueryを駆使～

中山テック 代表の中山です。

さて、突然ですがホームページを見ていて、文字が下からフワッと浮き出るアニメーションを見たことがありますか？

これはどのように制御しているのでしょうか。

今回は下から文字をふわっと出す方法についてお話したいと思います。

※参考ページ

HTML

<p class="scroll-up">我々は何も成し遂げていない。</p><br><br>
<p class="scroll-up">だがしかし、何をすれば<br><br>良いかもわからない。</p><br><br><br><br>
<p class="scroll-up">まずは色々なことに挑戦し<br><br>何かをやり遂げる・・・</p>

CSS

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

• システム開発関連記事

jQuery

$(function () {
  $(window).scroll(function () {
    const windowHeight = $(window).height();
    const scroll = $(window).scrollTop();

    $('.scroll-up').each(function () {
      const targetPosition = $(this).offset().top;
      if (scroll > targetPosition - windowHeight + 100) {
        $(this).addClass("is-show");
      }
    });
  });
});

 else {
    $(this).removeClass("is-show");
 }

Javascript(jQuery未使用)

function scroll_effect() {
  var element = document.getElementsByClassName('scroll-up');
  if(!element) return;
                      
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  var showTiming = 200; // 要素を表示するタイミング
  for(var i = 0; i < element.length; i++) { 
    var elemClientRect = element[i].getBoundingClientRect(); 
    var elemY = scrollY + elemClientRect.top; 
    if(scrollY > elemY - windowH + showTiming) {
      element[i].classList.add('is-show');
      
    }
  }
}

window.addEventListener('scroll', scroll_effect); // スクロール時に実行