jQuery スクロールに合わせ画像表示(eachで複数一括設定)

🍺🍺🍺
はてなブログはじめました。
http://sudara-bluse.hatenablog.com/entry/2017/10/27/013435
🍺🍺🍺

画面を下にスクロールしていくと、
ちょうど良いところでふわっと要素が表示されるよくあるやつ。

いちいち一つ一つ

hoge.js

// スクロール値が400超えたらfadeIn
if($(window).scrollTop() > 400){
  $("#img").fadeIn();
}

のように指定するのは大変なので、
eachを使って、良い感じのとこでfadeInする一括指定コードメモ。

hoge.js

// ターゲットを非表示にしとく
$(".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);  
        }
    });
});

便利