スクロールしたらフェードインするやつを最初から画面内であれば表示してしまいたい。

前提・実現したいこと

現在、写真がグリッドで並ぶウェブページをWordPressで製作しています。
画面内に入って来たらふわっと表示するよくみるものを実装したく、作業しています。

以下のコードで、スクロールするとフェードインするところまでは実装できたのですが、最初から画面内にある要素に関しては、最初のタイミングでスクロールせずともフェードインさせたいです。(写真が極端に少ないとスクロールできないため)

該当のソースコード

php
1
2// Script
3<script type="text/javascript">
4  jQuery(function(){
5    jQuery(window).scroll(function (){
6        jQuery('.fadein').each(function(){
7            var elemPos = jQuery(this).offset().top;
8            var scroll = jQuery(window).scrollTop();
9            var windowHeight = jQuery(window).height();
10            if (scroll > elemPos - windowHeight + 300){
11                jQuery(this).addClass('scrollin');
12            }
13        });
14    });
15  });
16</script>
17
18
19// CSS
20<style>
21
22/* 画面外にいる状態 */
23.fadein {
24    opacity : 0.1;
25    transform : translate(0, 30px);
26    transition : all 500ms;
27  }
28
29/* 画面内に入った状態 */
30.fadein.scrollin {
31    opacity : 1;
32    transform : translate(0, 0);
33  }
34
35</style>
36

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

処理を関数にまとめて、スクロールした時＆読み込み時で動作させるといいと思います。
関数名はお好みで。

javascript
1function scroll_fadein(){
2	jQuery('.fadein').each(function(){
3	    var elemPos = jQuery(this).offset().top;
4	    var scroll = jQuery(window).scrollTop();
5	    var windowHeight = jQuery(window).height();
6	    if (scroll > elemPos - windowHeight + 300){
7	        jQuery(this).addClass('scrollin');
8	    }
9	});
10}
11
12jQuery(function(){
13	jQuery(window).scroll(function (){
14	    scroll_fadein();
15	});
16	scroll_fadein();
17});
18

css
1	.fadein {
2		height: 150px;
3		background: #999;
4		opacity: 0;
5		transition: opacity .4s;
6	}
7	.fadein.scrollin {
8		opacity: 1;
9	}

HTML
1	<div class="fadein">
2		AAAAAA
3	</div>
4	<div class="fadein">
5		AAAAAA
6	</div>
7	<div class="fadein">
8		AAAAAA
9	</div>
10	<div class="fadein">
11		AAAAAA
12	</div>
13	<div class="fadein">
14		AAAAAA
15	</div>
16	<div class="fadein">
17		AAAAAA
18	</div>
19
20

投稿2018/01/30 11:51

編集2018/01/30 12:08

kszk311

総合スコア3404

退会済みユーザー

2018/01/30 11:57

ありがとうございます！すべてが最初から表示され、フェードイン自体をしなくなってしまったのですが、なにか原因がありますでしょうか？？？

miyabi_pudding

2018/02/01 05:19

kszk311さんのものを試してみましたが、ちゃんと順番にフェードインされました。ブロックの高さが小さいから、ファーストビューの範囲内に入ってしまっている、とかではないでしょうか？もしくは、意図する動作にならないブラウザを挙げる、 Wordpressで読み込んでしまっているJSも列挙する、などもう少し詳しく状況を投稿に含めてはいかがでしょうか。

kszk311

2018/02/01 05:42

原因を特定できないので、HTMLのソースも教えていただけると幸いです。 miyabi_takatsukさんのおっしゃる通り、ほかで使用しているプラグインなどありましたらそれも教えてください。

退会済みユーザー

2018/02/08 05:26

大変遅くなってしまい申し訳ありません。私の環境ですとJSで横幅固定の要素が入れ子で並ぶグリッドを表示していて、どうやらその動作が終わる前に今回いただいた部分のコードが走ってしまっていたようです。完全にこちらの不手際でした。ありがとうございました！！！

行動規範の内容に同意します

設定したイベントを即時で呼んでしまえばいいと思うので、これでどうでしょうか。

javascript
1  jQuery(function(){
2    jQuery(window).scroll(function (){
3        jQuery('.fadein').each(function(){
4            var elemPos = jQuery(this).offset().top;
5            var scroll = jQuery(window).scrollTop();
6            var windowHeight = jQuery(window).height();
7            if (scroll > elemPos - windowHeight + 300){
8                jQuery(this).addClass('scrollin');
9            }
10        });
11    });
12    jQuery(window).scroll();
13  });