<h1 id="heading">ふんわり表示！</h1>

<p class="scroll">↓ スクロール ↓</p>

#heading {
  font-size: 3rem;
  transition: 4s;
  opacity: 0;
  margin: 120vh auto;
}

body {
  padding: 1rem;
}
.scroll {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}

// 着火点となる要素
const heading = document.getElementById('heading');

// オプション指定
const options = {
  threshold: 1 // 指定範囲は0 〜 1
};

// 実行するよ
const observer = new IntersectionObserver(showElement, options);

// heading に到達したら発動
observer.observe(heading);

// 要素が表示されたら実行する動作
function showElement(){
  heading.style.opacity = 1;
};