【JS】スクロール時に特定の要素をフェード表示させる

画面をスクロールすると画像がふわっとフェードされる方法

$(window).scroll(function (){
    $(".fadein").each(function(){
      var imgPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/10){
        $(this).addClass("scrollin");
      } else {
        $(this).removeClass("scrollin");
      }
    });
});

$(window).scroll(function (){

$(".fadein").each(function(){

var imgPos = $(this).offset().top;

var scroll = $(window).scrollTop();

var windowHeight = $(window).height();

if (scroll > imgPos - windowHeight + windowHeight/10){

$(this).addClass("scrollin");

} else {

$(this).removeClass("scrollin");

}

});

CSS

.fadein {
		opacity : 0.1;
		transition : all 1s;
	}
	.fadein.scrollin {
		opacity : 1;
		}

.fadein {

opacity : 0.1;

transition : all 1s;

}

.fadein.scrollin {

opacity : 1;

}

その他、CSS内をいじればいろいろできます。

また※要素に設定するCSSは「.fadein」のみ入れてください。「.fadein.scrollin」も記述すると動きません。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル