要素が画面内に入ったらふわっとフェードインさせたい

前提・実現したいこと

要素が画面内に入ったらふわっとフェードインさせたいです

発生している問題

一つ目のdivはふわっとフェードインするのですが、2つ目以降はもうすでに表示されていて
フェードインされないです。

該当のソースコード

HTML
1<div class="main1 fadein">
2        <h2>タイトル</h2>
3        <p>テキストテキストテキストテキストテキストテキスト</p>
4</div>
5<div class="main2 fadein">	
6        <h2>タイトル</h2>
7        <p>テキストテキストテキストテキストテキストテキスト</p>
8</div>
9<div class="main3 fadein">
10        <h2>タイトル</h2>
11        <p>テキストテキストテキストテキストテキストテキスト</p>
12</div>

CSS
1	.main1 {
2		width: 900px;
3		height: 1000px;
4		background-color: gray;
5	}
6	
7	.main2 {
8		width: 900px;
9		height: 1000px;
10		background-color: pink;
11	}
12	
13	.main3 {
14		width: 900px;
15		height: 1000px;
16		background-color: green;
17	}
18
19	.fadein {
20    opacity : 0.1;
21    transform : translate(0, 50px);
22    transition : all 500ms;
23    }
24
25	/* 画面内に入った状態 */
26	.fadein.scrollin {
27    opacity : 1;
28    transform : translate(0, 0);
29    }

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

試したこと

●https://imasashi.net/element-fadein.html
上記のサイトを参考にしていたのですが、背景の色がついていないとわかりづらいと思い
sectionタグからdivタグに変えたところ動作確認ができなくなってしまいました。
どなたか詳しい方いらっしゃいましたらご教授いただきたいです。
よろしくお願いします。

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

回答2件

ひたすら冗長に・・・(デバグ窓付き)

javascript
1<style>
2.main1 {
3  width: 900px;
4  height: 1000px;
5  background-color: gray;
6}
7.main2 {
8  width: 900px;
9  height: 1000px;
10  background-color: pink;
11}
12.main3 {
13  width: 900px;
14  height: 1000px;
15  background-color: green;
16}
17.fadein {
18  opacity : 0.1;
19  transform : translate(0, 50px);
20  transition : all 500ms;
21}
22.fadein.scrollin {
23  opacity : 1;
24  transform : translate(0, 0);
25}
26</style>
27```ここに言語を入力
28コード
29```<script>
30$(function(){
31  $(window).scroll(function (){
32    $('.fadein').each(function(){
33      var idx=$('.fadein').index(this);
34      var elemTop = parseInt($(this).offset().top);
35      var elemBottom = elemTop+$(this).innerHeight();
36      var scrollTop = $(window).scrollTop();
37      var scrollBottom = scrollTop+window.innerHeight;
38      $('#debug div').eq(idx).text("["+elemTop+"],["+elemBottom+"],["+scrollTop+"],["+scrollBottom+"]");
39      if (
40        elemTop>=scrollTop      && elemTop <= scrollBottom    ||
41        scrollTop >=elemTop     && scrollTop <= elemBottom    ||
42        elemBottom >= scrollTop && elemBottom <= scrollBottom ||
43        scrollBottom>=elemTop   && scrollBottom <= elemBottom ||
44        0){
45        $(this).addClass('scrollin');
46      }else{
47        $(this).removeClass('scrollin');
48      }
49    });
50  });
51});
52</script>
53<div id="debug" style="position:fixed;right:0;bottom:0;background-Color:yellow;z-index:1">
54<div></div>
55<div></div>
56<div></div>
57</div>
58<div class="main1 fadein">
59        <h2>タイトル</h2>
60        <p>テキストテキストテキストテキストテキストテキスト</p>
61</div>
62<div class="main2 fadein">    
63        <h2>タイトル</h2>
64        <p>テキストテキストテキストテキストテキストテキスト</p>
65</div>
66<div class="main3 fadein">
67        <h2>タイトル</h2>
68        <p>テキストテキストテキストテキストテキストテキスト</p>
69</div>

投稿2019/08/01 09:34

yambejp

総合スコア114843

ベストアンサー

参考サイトのjavascriptの記述の下に**※要jQuery。**とありますが読み込んでますか？
デモページだと<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>で読み込んでるやつです。

一応、質問に提示のコード（jQuery読み込み）で動作しているかなと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  <style>
9    .main1 {
10      width: 900px;
11      height: 1000px;
12      background-color: gray;
13    }
14
15    .main2 {
16      width: 900px;
17      height: 1000px;
18      background-color: pink;
19    }
20
21    .main3 {
22      width: 900px;
23      height: 1000px;
24      background-color: green;
25    }
26
27    .fadein {
28      opacity: 0.1;
29      transform: translate(0, 50px);
30      transition: all 500ms;
31    }
32
33    /* 画面内に入った状態 */
34    .fadein.scrollin {
35      opacity: 1;
36      transform: translate(0, 0);
37    }
38  </style>
39</head>
40
41<body>
42  <div class="main1 fadein">
43    <h2>タイトル</h2>
44    <p>テキストテキストテキストテキストテキストテキスト</p>
45  </div>
46  <div class="main2 fadein">
47    <h2>タイトル</h2>
48    <p>テキストテキストテキストテキストテキストテキスト</p>
49  </div>
50  <div class="main3 fadein">
51    <h2>タイトル</h2>
52    <p>テキストテキストテキストテキストテキストテキスト</p>
53  </div>
54  <script>
55    $(function() {
56      $(window).scroll(function() {
57        $('.fadein').each(function() {
58          var elemPos = $(this).offset().top;
59          var scroll = $(window).scrollTop();
60          var windowHeight = $(window).height();
61          if (scroll > elemPos - windowHeight + 200) {
62            $(this).addClass('scrollin');
63          }
64        });
65      });
66    })
67  </script>
68</body>
69
70</html>
71