スクロールしたらフェードインして表示させる

こんにちは、ちゃるです！

今日はスクロールしたらフェードインして表示させる動きをCSSとJavascriptで作ってみます。次のような手順で作っていきます！

HTMLに、フェードインさせる要素を記述する。

<div class="fade-in-element">要素をフェードインさせる</div>

CSSで、フェードインさせる要素に対して、透明度を0（不透明度を0）に設定する。

.fade-in-element {
  opacity: 0;
}

JavaScriptで、ウィンドウがスクロールされた時に、要素の透明度を1（不透明度を100）に変更する。

window.addEventListener('scroll', function() {
  var fadeInElements = document.querySelectorAll('.fade-in-element');
  fadeInElements.forEach(function(element) {
    element.style.opacity = 1;
  });
});

このように、CSSとJavaScriptを組み合わせることで、要素がフェードインする処理を実装することができました！

JavaScriptでは、ウィンドウのスクロール時にイベントが発生するように、scrollイベントを設定しています。このイベントが発生した際に、要素の透明度を1（不透明度を100）に変更することで、フェードインするようにしています。

サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀