スクロールした時に下からふわっと文字を出す方法～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); // スクロール時に実行