[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 (2019/04/25 15:47:58時点 Amazon調べ-詳細)

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

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

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