ふわっとくる　複数画像　応用

HTML

<section class="multiple">
    <h2>DEMO2</h2>

    <div class="multiple-list js-scroll-trigger">
        <div class="multiple-item u-fade-type-up">
            <img src="[myphp file='soutai']/img/cat1.jpg" alt="">
        </div>
<div class="multiple-item u-fade-type-up">
            <img src="[myphp file='soutai']/img/cat1.jpg" alt="">
        </div>
<div class="multiple-item u-fade-type-up">
            <img src="[myphp file='soutai']/img/cat1.jpg" alt="">
        </div>
<div class="multiple-item u-fade-type-up">
            <img src="[myphp file='soutai']/img/cat1.jpg" alt="">
        </div>
<div class="multiple-item u-fade-type-up">
            <img src="[myphp file='soutai']/img/cat1.jpg" alt="">
        </div>
<div class="multiple-item u-fade-type-up">
            <img src="[myphp file='soutai']/img/cat1.jpg" alt="">
        </div>
       
    </div>
</section>

CSS

/* レイアウトや見た目のスタイル */
/* ---------------------------- */

.multiple-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.multiple-item{
    width: 49%;
    margin-top: 20px;
}

.multiple-item:nth-child(-n+2){
    margin-top: 0;
}

/* アニメーションスタイル */
/* ---------------------------- */

/* アニメーション前 */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
.is-active .u-fade-type-up{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}

.is-active .u-fade-type-up:nth-child(2){transition-delay: .4s;}
.is-active .u-fade-type-up:nth-child(3){transition-delay: .8s;}
.is-active .u-fade-type-up:nth-child(4){transition-delay: 1.2s;}
.is-active .u-fade-type-up:nth-child(5){transition-delay: 1.6s;}
.is-active .u-fade-type-up:nth-child(6){transition-delay: 2s;}

@media screen and (min-width: 768px) {
    .multiple-item{
        width: 32%;
    }

    .multiple-item:nth-child(-n+3){
        margin-top: 0;
    }
}

head内に書いておく

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
	 $(function () {
    // aimation呼び出し
    if ($('.js-scroll-trigger').length) {
        scrollAnimation();
    }

    // aimation関数
    function scrollAnimation() {
        $(window).scroll(function () {
            $(".js-scroll-trigger").each(function () {
                let position = $(this).offset().top,
                    scroll = $(window).scrollTop(),
                    windowHeight = $(window).height();

                if (scroll > position - windowHeight + 200) {
                    $(this).addClass('is-active');
                }
            });
        });
    }
    $(window).trigger('scroll');
});
	 </script>

<!-- wp:paragraph -->
<p>＋αで　キャッチコピーなどをふわっとさせるには　以下のHTML　その他は上記と同じ</p>
 <div class="js-scroll-trigger">
        <div class="multiple-item u-fade-type-up">
            メインコピーメインコピー
        </div>
<div class="multiple-item u-fade-type-up">
           サブコピー
        </div>
 </div>