【CSS+JS】スクロールでふわっと出てくるフェードインの実装方法【jQueryなし】

画像や要素などがスクロールするとふわっと出てくる「フェードイン」の実装方法をまとめます。仕事でやることになって、調べましたが自力でも出来そうだったので、私のようにjQueryに依存しないで実装したいという方のために書きます。ちなみに私はjQueryは個人的に苦手でまったく書けないです…。

適当なHTMLを用意しました。ここではh1と内容全体にフェードインさせるクラスを付けました。

HTML
<main class="main">
<h1 class="fade-in">スクロールするとふわっと現れる</h1>
<div class="content fade-in">
<p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
<p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
</div>
</main>

CSS
/* フェードインしたい要素に付けるクラス */
.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 300ms;
}

/* フェードインするためのクラス */
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

JavaScript
//ふわっと出てくるエフェクト
let scrollAnimationElm = document.querySelectorAll('.fade-in');
let scrollAnimationFunc = function(){
    for(let i = 0; i < scrollAnimationElm.length; i++){
        let triggerMargin = 300;
        if(window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin){
            scrollAnimationElm[i].classList.add('show'); //getBoundingClientRectは要素の高さを取得
        }
    }
}
window.addEventListener('load', scrollAnimationFunc);
window.addEventListener('scroll', scrollAnimationFunc);

JavaScriptは</body>直前で読み込んでください。

たったこれだけでWebサイトがリッチな感じになります。見ている方も、アニメーションする方が読み込まれている感じがするのでスクロールしてもらいやすい（？）と私は勝手に思っています。

すでにあるサイトにクラスを付けてCSS+JSコピペで実装できるので、ぜひやってみてください！