HTML CSS JSでスクロール発火アニメーション

CSSでスクロールアニメーションをするためには、以下のようなコードを使用することができます。

まず、スクロールアニメーションを適用したい要素に対して、適当なクラスを作成します。ここでは「scroll-animation」というクラス名を使います。

<div class="scroll-animation">この要素にスクロールアニメーションを適用します</div>

.scroll-animation {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(50px); /* 下に50px移動 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションのプロパティ */
}

.scroll-animation.show {
  opacity: 1; /* スクロールすると表示される */
  transform: translateY(0); /* 移動しない */
}

これで、要素が非表示の状態である「scroll-animation」クラスを持つ要素が表示されるまでスクロールした時、要素がアニメーションして表示されます。

最後に、JavaScriptを使用して、スクロール位置が要素の上端に達した時に、クラス名を追加する必要があります。

window.addEventListener('scroll', () => {
  const element = document.querySelector('.scroll-animation');
  const position = element.getBoundingClientRect().top;
  const screenHeight = window.innerHeight;

  if (position < screenHeight * 0.75) { // 画面の下から3/4の位置までスクロールした時にクラス名を追加
    element.classList.add('show');
  }
});

これで、スクロールアニメーションが実現されます。ただし、詳細な設定については、デザインによって異なるため、必要に応じて調整する必要があります。