jQueryとｃｓｓだけでスクロールするとフェードインするアニメーションができません。

前提・実現したいこと

jQueryとcssだけでスクロールするとフェードインするアニメーションを作っています。
スクロールするとscrollinのクラスが付与され実行されopacityで非表示になりfadeinで表示されるのですが
scrollinが付与されず画像が非表示になりません。
jQueryのコードが間違えているのでしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="keywords" content="">
6        <meta name="description" content="">
7        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=auto">
8        <meta property="og:site_name" content="">
9        <meta property="og:title" content="">
10        <meta property="og:url" content="">
11        <meta property="og:type" content="">
12        <meta property="og:image" content="">
13        <title></title>
14        <link rel="stylesheet" href="css/style.css">
15        <link rel="stylesheet" href="js/fadein.css">
16    </head>
17    <body>
18      <div id="wrapper">
19          <div class="fadein">
20              <div>子要素</div>
21              <div>子要素</div>
22              <div>子要素</div>
23              <div>子要素</div>
24           </div>
25      </div>
26    </body>
27</html>

css
1body {
2	margin: 0;
3	padding: 0;
4}
5
6#wrapper {
7
8}
9
10.inner {
11	max-width: 1200px;
12	width: 100%;
13	margin-left: auto;
14	margin-right: auto;
15}
16
17.fadein {
18  opacity: 1;
19  transform : translate(0, 50px);
20  transition : all 1500ms;
21}
22
23.fadein.scrollin{
24  opacity: 0;
25  transform: translate(0, 0);
26}
27

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

試したこと

ネットで調べて何度か同じような実装を行ったのですが
結果は同じようになります。

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

回答3件

ベストアンサー

HTML
1<link rel="stylesheet" href="js/fadein.css">

となってますが、cssではなくJavascriptなので、正しくはこうであるはずです。
※ファイル名の拡張子もcssにしているのであれば、jsに変えるべきです。

HTML
1<script src="js/fadein.js"></script>

また、fadein.jsで、jQueryを使用しているのであれば、jQueryのjavascriptを先に読み込まないと駄目です。

HTML
1<script
2  src="https://code.jquery.com/jquery-3.4.1.min.js"
3  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
4  crossorigin="anonymous"></script>
5<script src="js/fadein.js"></script>

投稿2019/11/01 04:56

LineOfLightning

総合スコア253

oyu

2019/11/01 05:17

教えていただいた通りに行ったのですがスクロールしたらフェードインするアニメーションになりません。原因が分かりません。

LineOfLightning

2019/11/01 05:21

F12で開発者ツール開いてみてください。ちゃんとfadein.jsは読み込まれていますか？

oyu

2019/11/01 05:28 編集

再読み込みとキャッシュを調べたのですが変わりはないようです。 fadein.jsが読み込まれてないのが原因でしょうか？

LineOfLightning

2019/11/01 05:30

開発者ツールでfadein.jsが読み込まれているかどうかがわかるはずです。ファイル名がfadein.cssのままにしてあるせいで、fadein.jsとファイル名が不一致で読み込まれていないのではないかということはないですよね？と聞いてるんです。

oyu

2019/11/01 05:32

こちらの通りにコードを書き換えました。どうでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=auto"> <meta property="og:site_name" content=""> <meta property="og:title" content=""> <meta property="og:url" content=""> <meta property="og:type" content=""> <meta property="og:image" content=""> <title></title> <link rel="stylesheet" href="css/style.css"> <script src="js/fadein.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var elemPos = $(this).offset().top, scroll = $(window).scrollTop(), windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 100){ $(this).addClass('scrollin'); } }); }); }); </script> </head> <body> <div id="wrapper"> <div class="fadein"> <div>子要素</div> <div>子要素</div> <div>子要素</div> <div>子要素</div> </div> </div> </body> </html>

LineOfLightning

2019/11/01 05:38

javascriptをhtmlに埋め込むなら「<script src="js/fadein.js"></script>」は不要です。また、先程も言ったように「<script src="js/fadein.js"></script>」では、jQueryを使用しています。 jQueryのスクリプトタグより、先に「<script src="js/fadein.js"></script>」を書いては絶対に駄目です。 </body>タグの直前に<br>タグを百個ほどつけて、スクロールできるようにしてみてください。それでスクロールしてもフェードアウトされませんか？

oyu

2019/11/01 05:47

ありがとうございます。原因は読み込んでいなかったのですね。

LineOfLightning

2019/11/01 05:58

厳密に言いますと以下の通りですね。 1. fadein.jsをlinkタグで読み込んでいた。結果、javascriptとして読み込まれないので、処理が行われない。※本来はscriptタグで読み込むべき。 2. fadein.jsでは、jQueryで定義された関数を使用しようとしているのに、jQueryのscriptタグより先にfadein.jsのscriptタグを記載していたので、fadein.jsが先に読み込まれてしまっていた。結果、「そんな関数ないよ！」とエラーになってしまい、fadein.jsのjavascriptが実行されなかった。

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

下記をhtmlファイルに追加してみてください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
    $(window).scroll(function (){
      $('.fadein').each(function(){
        var elemPos = $(this).offset().top,
            scroll = $(window).scrollTop(),
            windowHeight = $(window).height();
          if (scroll > elemPos - windowHeight + 100){
              $(this).addClass('scrollin');
          }
      });
    });
  });
</script>

投稿2019/11/01 04:06