クリエイター：コーディング備忘録ブログ

RSS

コーディング

jQueryでスクロール時に下から表示させる方法

2019.03.18

スクロール時にしたからコンテンツがふわっとフェードインさせる方法です、

■css

.fade{
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.6s;
}

1

2

3

4

5

.fade{

opacity : 0;

transform: translateY(30px);

transition: all 0.6s;

}

■js

$(function(){
    $(window).scroll(function (){
        $('.fade').each(function(){
            var target = $(this).offset().top;
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > target - windowHeight + 300){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});

1

2

3

4

5

6

7

8

9

10

11

12

13

$(function(){

$(window).scroll(function (){

$('.fade').each(function(){

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

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

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

if (scroll > target - windowHeight + 300){

$(this).css('opacity','1');

$(this).css('transform','translateY(0)');

}

});

});

});

表示させるタイミングは、ターゲットの存在するスクロール位置から300のところ(if (scroll > target – windowHeight + 300)です。

この記事を見た人は次の記事も見ています。

WordPressでページに個別CSSを追加する方法

前の記事

youtube埋め込みjQueryプラグイン「Boxer」の使い方

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

Photoshopでの画像背景修正

2021.07.19

コーディング

検索フォームにフォーカスした時、リンクをクリックできるメニューを表示

2018.08.09

コーディング

漢字にふりがな(ルビ)をつける

2017.08.01

コーディング

:placeholder-shown

2018.06.25

コーディング

.htaccessを使用したリダイレクト設定

2016.06.27

コーディング

WordPressのセキュリティを強化する

2018.05.30