【Javascript】画面表示領域に入ったらクラスを付与する方法

使い方

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    function animation_start() {
        $(".animation").each(function() {
            var hit = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var wHeight = window.innerHeight;

            var start_margin = 100;

            if ((hit + start_margin) < (wHeight + scroll)) {
                $(this).addClass("show");
                console.log("show:" + $(this).text());
            }
        });
    }

    $(function() {
        $(window).on("scroll", function() {
            animation_start();
        });

        animation_start();
    });
</script>
<style>
    .show {
        animation: anime1 5s ease 0s infinite alternate;
    }

    @keyframes anime1 {
        0% {
            color: black;
        }

        30% {
            color: yellow;
        }

        60% {
            color: blue;
        }

        100% {
            color: green;
        }
    }
</style>

補足

参考