【CSS×jQuery】時間差でフェードインするアニメーション

2024-08-25

このページにはプロモーションが含まれています。

はじめに

こんにちは！はなまるです。

今回は、jQueryを使って時間差で要素をふわっと表示するアニメーションのご紹介です。

スクロールしたら、順番にふわっと出現させたい時のご参考になれば嬉しいです。

コード紹介

Result画面を下にスクロールするとアニメーションが動きます。

See the Pen Untitled by hanamaru (@it-nyanter) on CodePen.

コードの補足説明

HTML

表示させたい要素を記述し、jQueryを読み込みます。

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<div class="bubble-section">
<img class="bubble-l block fadeIn1500ms" src="https://it-nyanter.com/wp-content/uploads/2024/08/Vector-1.png" width="853" height="420">
<img class="bubble-m block fadeIn1s" src="https://it-nyanter.com/wp-content/uploads/2024/08/Vector-2.png" width="130" height="105">
<img class="bubble-s block fadeIn500ms" src="https://it-nyanter.com/wp-content/uploads/2024/08/Vector-3.png" width="75" height="60">
<img class="coffee-cup" src="https://it-nyanter.com/wp-content/uploads/2024/08/coffee-cup.png" width="340" height="300">
</div>

CSS

0.5、1、1.5、2秒かけてフェードインするクラスを指定します。

/* 吹き出し部分 */
body{
  background-color: green;
}
.bubble-section {
    position: relative;
    height: 600px;
}

.bubble-l {
    width: 350px;
    height: auto;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.bubble-m {
    position: absolute;
    top: 30%;
    left: 45%;
}

.bubble-s {
    position: absolute;
    top: 50%;
    left: 45%;
}

.coffee-cup {
    position: absolute;
    top: 55%;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: -1;
}
/* ここから時間差フェードインアニメーション */
/* 1秒間かけてフェードイン */
.fadeInAnime1s {
    animation-name: fadeIn1s;
}

.fadeIn1s {
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes fadeIn1s {
    0% {}

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 1.5秒間かけてフェードイン */
.fadeInAnime1500ms {
    animation-name: fadeIn1500ms;
}

.fadeIn1500ms {
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes fadeIn1500ms {
    0% {}

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 0.5秒間かけてフェードイン */
.fadeInAnime500ms {
    animation-name: fadeIn500ms;
}

.fadeIn500ms {
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes fadeIn500ms {
    0% {}

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 2秒間かけてフェードイン */
.fadeInAnime2s {
    animation-name: fadeIn2s;
}

.fadeIn2s {
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes fadeIn2s {
    0% {}

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

jQuery

スクロール量に応じてクラスを付与します。

$(function () {
    
    $(window).scroll(function () {
        
        const wHeight = $(window).height();
        
        const wScroll = $(window).scrollTop();
        
        $(".block").each(function () {
            
            const bPosition = $(this).offset().top;
            
            if (wScroll > bPosition - wHeight + 200) {
                $(".fadeIn1s").addClass("fadeInAnime1s");
                $(".fadeIn1500ms").addClass("fadeInAnime1500ms");
                $(".fadeIn500ms").addClass("fadeInAnime500ms");
                $(".fadeIn2s").addClass("fadeInAnime2s");
            }
        });
    });
});