teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

不具合修正

2017/05/23 14:36

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -2,16 +2,31 @@
2
2
  > 画面内に要素が入ったらクラス名「fadein」がある要素にクラス名「transparent」を追加
3
3
 
4
4
  はできていると思います。
5
+
6
+ これでどうでしょう?
5
7
  ```JavaScript
6
8
  $(function() {
7
- $(window).scroll(function() {
9
+ $(window).on('scroll', function() {
8
- $('img.fadein').each(function(index) {
10
+ var count = 0; // 今回のスクロールで、遅延フェードインした回数
9
- var position = $(this).offset().top - $(window).height();
11
+ var windowY = $(window).scrollTop() + $(window).height();
10
- var diff = $(window).scrollTop() - position - 200;
11
12
 
12
- if (diff > 0 && ! $(this).hasClass('transparent')) {
13
+ $('.transparent').each(function() {
13
- $(this).addClass('transparent');
14
+ if ($(this).hasClass('fadein')) {
15
+ return;
14
16
  }
17
+
18
+ var diffY = windowY - $(this).offset().top;
19
+
20
+ if (diffY > $(this).height()) {
21
+ // 画像が上すぎるときは、遅延しないでフェードイン
22
+ $(this).addClass('fadein');
23
+ }
24
+ else if (diffY > 0) {
25
+ // 遅延フェードインして、次に遅延フェードインする時間を延ばす
26
+ $(this).delay(count++ * 500).queue(function() {
27
+ $(this).addClass('fadein');
28
+ });
29
+ }
15
30
  });
16
31
  });
17
32
  });