jQueryとCSSでスクロール時に下から要素をふわっと表示させる方法

今回はjQueryとCSSを使ってスクロール時に下から要素をふわっと表示させる方法を紹介します。

オサレなサイトでよく見かけるアレです。画像とかをふわっと表示させたいときに使えますね。

 

CSS

.fade-up {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}

 

CSSではtransitionとベンダーインプレックスを指定します。

ふわっと表示させる必要があるので、0.7秒くらいを指定しておきましょう。

 

jQuery

$(window).on('load',function(){
	
	// fade-up
    $(window).scroll(function (){
        $('.fade-up').each(function(){
            var POS = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();

            if (scroll > POS - windowHeight){
                $(this).css({
                        'opacity':'1',
                        'transform':'translateY(0)',
                        '-webkit-transform':'translateY(0)',
                        '-moz-transform':'translateY(0)',
                        '-ms-transform':'translateY(0)'
                });
            } else {
                $(this).css({
                        'opacity':'0',
                        'transform':'translateY(70px)',
                        '-webkit-transform':'translateY(70px)',
                        '-moz-transform':'translateY(70px)',
                        '-ms-transform':'translateY(70px)'
                });
            }
        });
    });
});

 

ふわっと表示させたい要素の位置をoffset().topで取得します。

また、スクロール量を保存するために変数POSに上からのスクロール量を格納しておきます。

ふわっと表示させたい要素の位置よりスクロール量が増えたらいよいよふわっと表示させます。opacityやtranslateでふわっと表示させるCSSを追加しましょう。

それ以外の時はopacity: 0で完全に透過させておきます。