【JavaScript＆CSS】画面をスクロールした時に横からふわっと出現させる方法

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

さて、以前似たようなブログを執筆しましたが、リファレンス的に残してるので気になさらぬよう・・・

今回はスクロールして該当の位置に到達すると横からふわっと画像や文字を出す方法についてのブログとなります。

早速、お話したいと思います。

※参考ページ

• JavaScript&CSS関連記事(記事はまだまだ続きます)

.fuwattoYoko {
  opacity: 0; 
  visibility: hidden;
transform: translateX(-150px);　⇒①
  transition: all 1s;
}
.fuwattoYoko.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);　⇒②
}

function fy_effect() {
  var element = document.getElementsByClassName('fuwattoYoko');
  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', fy_effect); //スクロール時に実行