ふわっとくる　基本

投稿者: 投稿日:
https://moshashugyo.com/media/animate-on-scroll 
HTMLには


<section class="single">
    <h2>DEMO1</h2>

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

    ...
    </div>
</section>
CSSには

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

.single-item + .single-item{
    margin-top: 80px;
}

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

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

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

<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>

＋αで　キャッチコピーなどをふわっとさせるには　以下のHTML　その他は上記と同じ

 <div class="js-scroll-trigger">
        <div class="multiple-item u-fade-type-up">
            メインコピーメインコピー
        </div>
<div class="multiple-item u-fade-type-up">
           サブコピー
        </div>
 </div>