1. ホーム
2. パソコン
3. javascript

【javascript】スクロールして、指定の位置で要素をフワッと出現させる方法

投稿日 : 2022年10月11日 更新日 :

やりたいこと

参考

要素の高さを取得する方法。getBoundingClientRectについて。

【javascript】ページの高さにおけるスクロール量をパーセント（%）で表示

必要な値を取得

// 画面の高さ
const screenHeight = window.innerHeight;
// 指定の場所、ここでは画面下30%の位置
const apperPoint = screenHeight * 0.7;
// 要素の画面上端からの距離
const elementHeightTotop = element.getBoundingClientRect().top;

スクロールイベント

展開

// 画面の高さ
const screenHeight = window.innerHeight;
// 指定の場所、ここでは画面下30%の位置
const apperPoint = screenHeight * 0.7;

window.addEventListener("scroll", ()=> {
  const box = document.querySelectorAll(".box");
  
  for (let i = 0; i < box.length; i++) {
    const element = box[i];
    // 要素の画面上端からの距離
    const elementHeightTotop = element.getBoundingClientRect().top;
    
    if(elementHeightTotop < apperPoint){
      element.classList.add("active");
    }else {
      element.classList.remove("active");
    }
  }
})

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box {
  width: 50%;
  height: 50px;
  border: 1px solid #333;
  border-radius: 7px;
  margin-bottom: 50px;
  transform: translateY(30px);
  transition: all .5s ease;
  opacity: .2;
}
.box.active {
  opacity: .2;
  background: orange;
  transform: none;
  animation: ani 1s ease-in-out forwards;
}
@keyframes ani {
  100%{
    opacity: 1;
  }
}

まとめ