[Jquery]コピペOK。スクロールしたら、ふわっと下から表示されるコード

他のサイト参考にして作ったんですが、ページの途中で開いたときってのがなかったので、簡単ではあるんだけど作りました。
アニメーションはCSSで50px下から0にもどるって感じですね。

やりたい事

  • スクロールしたら下からふわっと表示される。
  • リロードした時途中でもふわっと表示される。
$(function(){
    $(window).scroll(function (){
        $('.fade-in').each(function(){
            var ptop = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > ptop - windowHeight + 100){
                $(this).addClass('scroll-in');
            }
        });
    });
	var scroll = $(window).scrollTop();
	console.log(scroll);//削除してください。
	if (scroll >= 1){
		$(window).ready(function (){
		var scroll = $(window).scrollTop();
		
		$('.fade-in').addClass('scroll-in');
		});
	 }
});
.fade-in {
    opacity : 0.0;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
 
.scroll-in {
    opacity : 1;
    transform : translate(0, 0);
    }

>$(window).scroll(function ()・・・

ここまでだと、スクロールした時にって宣言なので、リロードした時うっすら消えている状態になります。
なのでページが表示された時TOP以外なら、表示されるようになるって風にしました。

たいがいはリロードだと思うので、その時は別にふわっと表示されなくてもいいだろうという事で。

>if (scroll >= 1)

ここが一番上以外ならってやつです。
>console.log(scroll)

参考元:http://skill-stock.hokoweb.com/skill/31/

Jquery初心者におススメの本

この本結構読みやすくてこれ見て勉強してました。
まぁこの表紙の絵が若干ちょっとあれなんですが、気にせず読んでください。

あぁ最近だとプロゲートで勉強するのがいんかな?

created by Rinker
¥3,024 (2018/09/22 23:47:27時点 Amazon調べ-詳細)

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。