javascript 【ver2】可视范囲に入ってたらfadeIn※要jQuer

Posted 2021-05-04

<div class="target">aaaaa</div>

// ターゲットを非表示にしとく
$(".target").css("visibility","hidden").css("opacity","0");
// .targetのついた画像をスクロールに合わせfadeIn
$(window).on("load scroll resize", function(){
    $(".target").each(function(){
        var imgPos = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > imgPos - windowHeight + windowHeight / 5){
            // ここに処理を書く
            $(this).css("visibility","visible")
            $(this).animate({opacity: 1}, 300);
        }
    });
});