【JS】フェードインのアニメーションで要素を表示させる方法

今回は、フェードインのアニメーションで要素を表示させる方法を紹介します。

JavaScriptを使って実装します。

【JS】フェードインのアニメーションで要素を表示させる方法

完成形はこちら。

下にスクロールしていくと、要素が下からフェードインして表示されます。

HTML

<section class="items">
    <div class="item fade-in">
        <div class="item__img">
            <img src="./image/1.JPG" alt="">
        </div>
        <div class="item__text">
            <h2>フェードインします</h2>
            <p>ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。</p>
        </div>
    </div>
    <div class="item fade-in">
        <div class="item__img">
            <img src="./image/2.JPG" alt="">
        </div>
        <div class="item__text">
            <h2>フェードインします</h2>
            <p>ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。</p>
        </div>
    </div>
    <div class="item fade-in">
        <div class="item__img">
            <img src="./image/4.JPG" alt="">
        </div>
        <div class="item__text">
            <h2>フェードインします</h2>
            <p>ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。ブラウザに要素が表示されると、フェードインします。</p>
        </div>
    </div>
</section>

まずは、フェードインさせたい要素に対して「fade-in」クラスをつけます。

CSS

// フェードイン
.fade-in {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 2s, transform 2s;
}
.fade-in.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

ブラウザに要素が表示されるまでは非表示にします。

そしてブラウザに要素が表示された時に、下から50pxほどフェードインして表示されるようにします。

JavaScript

// フェードイン
function showElementAnimation() {

    var element = document.getElementsByClassName('fade-in');
    if (!element) return;

    var showTiming = window.innerHeight > 768 ? 200 : 60;
    var scrollY = window.pageYOffset;
    var windowH = window.innerHeight;

    for (var i = 0; i < element.length; i++) {
        var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if (scrollY + windowH - showTiming > elemY) {
            element[i].classList.add('show');
        } else if (scrollY + windowH < elemY) {
        }
    }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

ブラウザに要素が表示されるとshowクラスがつき、下からフェードアウトするようにしました。

まとめ

以上が、フェードインのアニメーションで要素を表示させる方法でした。

関連記事:

【有益】大学生におすすめの本まとめ20選【2020年最新版】 【ブログ運営報告】大学生がブログを1ヶ月続けた結果【PV数】 【ワクワク！】すごいWEBサイトまとめ16選【2020年版】 【紹介！】僕が大学を1年間休学してやった「8つ」のこと【挑戦】