jQuery、ふわっと表示させたいが、うまく機能しない。

現在jQueryを勉強しているものです。
ポートフォリオ作成にあたりふわっと表示するイベントを登録したいのですが、なかなかうまくいきません。
新しい白紙のサイトで導入するとうまくいき、ポートフォリオサイトへクラスやjsファイルなどをコピー&ペーストでうまくいきませんでした。

どなたか原因がわかる方はいらっしゃいますでしょうか？

<行いたいプログラム>
ページをロードした際.load-upクラスをだんだん表示させるようなjQueryのコードを書きたいです。

<現在の状況>
.load-upが表示されず、真っ白な状態です。

https://reirei0727x.lolitapunk.jp/02_Blog/
上記のサイトの.load-upクラスになります。

参考にしたサイトはこちらです。
https://illbenet.jp/view/js-scroll_fade

HTMLファイルです

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="./css/script.css">

  <link rel="stylesheet" href="./css/style.css">
  <title>REI_BLOG</title>
</head>
<body>
  <header>
    <p>REI × BLOG</p>
    <nav>
      <ul>
        <li class="HOME"><a href="#">HOME</a></li>
        <li class="PROGRAM"><a href="#"> PROGRAM</a></li>
        <li class="BUSINESS"><a href="#">BUSINESS</a></li>
        <li class="SNS"><a href="#">SNS</a></li>
        <li class="MIND"><a href="#">MIND</a></li>
        <li class="CAMERA"><a href="#">CAMERA</a></li>
        <li class="BOOK"><a href="#">BOOK</a></li>
        <li class="OTHER"><a href="#">OTHER</a></li>
      </ul>
    </nav>
  </header>

  <div class="wrapper">
    <div class="main">
      <div class="content load-up">
        <p class="date">2020/04/01</p>
        <h1>記事のタイトル</h1>
        <p class="category">PROGRAM</p>
        <div class="img"></div>
        <p class="text">記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。</p>
        <p class="redemore">READ MORE</p>
      </div> <!--content-->

      <div class="content load-up">
        <p class="date">2020/04/01</p>
        <h1>記事のタイトル</h1>
        <p class="category">PROGRAM</p>
        <div class="img"></div>
        <p class="text">記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。</p>
        <p class="redemore">READ MORE</p>
      </div> <!--content-->

      <div class="content load-up">
        <p class="date">2020/04/01</p>
        <h1>記事のタイトル</h1>
        <p class="category">PROGRAM</p>
        <div class="img"></div>
        <p class="text">記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。</p>
        <p class="redemore">READ MORE</p>
      </div> <!--content-->
    </div>

    <div class="side">
      <div class="profile">
        <h1>このブログの著者</h1>
        <div><img src="./img/pic.jpg"></div>
        <h2>rei</h2>
        <p>
          1997年7月27日生まれ。
          1日15時間活動できる大のプログラミング好き。通常３ヶ月かかるスキルを３日で習得。持ち前の行動力で１週間でワードプレスの制作まで行い毎日スキルアップ中。迅速に丁寧に。をモットーに心を込めてweb制作いたします。
        </p>
      </div> <!--profile -->
      
      <div class="article">
        <h1>よく読まれている記事</h1>
        <ul>
          <li>
            <p></p>
            <h2>人気記事１</h2>
          </li>
          <li>
            <p></p>
            <h2>人気記事2</h2>
          </li>
          <li>
            <p></p>
            <h2>人気記事3</h2>
          </li>
        </ul>
      </div><!--article-->

      <div class="archive">
        <h1>Archive</h1>
        <ul>
          <li>2020年6月（）</li>
          <li>2020年6月（）</li>
          <li>2020年4月（）</li>
        </ul>
      </div>
    </div>
  </div>

  <footer>
    <p>Copyright - Rei, 2021 All Rights Reserved.</p>
  </footer>

<script src="./js/script.js"></script>
  
</body>
</html>

sassファイルです

*{
  list-style-type:none;
  margin: 0;
  padding: 0;
}

body{
  background-color: #B4C3D1;
}

header{
  p{
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    padding: 35px 0;
    background-color: #FFF;
  }

  @mixin a_before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    background-size: contain;
    display: inline-block;
    position: absolute;
    left: -20px;
    top: 1px;
  }

  nav{
    padding: 10px;
    background-color: #333;
    color: #FFF;
    height: 80px;
    align-items: center;
    display: flex;

    ul{
      padding: 10px;
      display: flex;
      align-items: center;
      display: flex;
      width: 100%;

      li{
        width: calc(100% / 8);
        padding: 20px 20px 20px 2rem;
        border-right: 1px #FFF solid;
        font-size: 0.8rem;
        color: #FFF;
        text-align: center;

        a{
          color: #FFF;
          text-decoration: none;
          position: relative;
        }
      }

      li.HOME{
        margin-top: 10px;
        border-left: 1px #FFF solid;

        a::before{
          background-image: url(../img/home.png);
          @include a_before;
        }
      }//home

      li.PROGRAM{
        margin-top: 10px;

        a::before{
          background-image: url(../img/program.png);
          @include a_before;
        }
      }

      li.BUSINESS{
        margin-top: 10px;

        a::before{
          background-image: url(../img/business.png);
          @include a_before;
        }
      }

      li.SNS{
        margin-top: 10px;

        a::before{
          background-image: url(../img/sns.png);
          @include a_before;
        }
      }

      li.MIND{
        margin-top: 10px;

        a::before{
          background-image: url(../img/mind.png);
          @include a_before;
        }
      }

      li.CAMERA{
        margin-top: 10px;

        a::before{
          background-image: url(../img/camera.png);
          @include a_before;
        }
      }

      li.BOOK{
        margin-top: 10px;

        a::before{
          background-image: url(../img/book.png);
          @include a_before;
        }
      }

      li.OTHER{
        margin-top: 10px;

        a::before{
          background-image: url(../img/other.png);
          @include a_before;
        }
      }
    }
  }

  /*
  nav{
    background-color: #333;
    height: 100px;
    display: flex;
    align-items: center;

    ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 10px;
      flex-wrap: wrap;

      li{
        color: #FFF;
        border-right: #FFF solid 1px;
        height: 60px;
  
        img{
          width: 18px;
          padding-right: 12px;
        }
      }
    }
  }
  */
} //header

@mixin border {
  font-size: 20px;
  position: relative;
  margin-bottom: 30px;
}

@mixin border_after{
  content: "";
  background-color: #004270;
  width: 3rem;
  height: 2px;
  position: absolute;
  left:40%;
  bottom: -5%;
}

@mixin side {
  background-color: #FFF;
  margin-bottom: 30px;
  text-align: center;
  padding: 30px;
}

.wrapper{
  display: flex;
  padding: 60px;
  .main{
    width: calc(70%);
    margin-right: 30px;

    .content{
      margin-bottom: 30px;
      background-color: #FFF;

      p.date{
        text-align: center;
        padding-top: 50px;
      }

      h1{
        margin: 30px 0;
        text-align: center;
        text-decoration: underline;
      }

      .category{
        margin-bottom: 30px;
        text-align: center;
      }

      .img{
        margin: 0 50px;
        background-color: #004270;
        height: 200px;
      }

      .text{
        margin: 35px 50px;
        text-align: center;
      }

      .redemore{
        text-align: center;
        padding-bottom: 50px;
        font-weight: 600;
      }
    }
  }

  .side{
    width: calc(30%);

    .profile {
      @include side;

      h1{
        @include border;
      }

      h1::after{
        @include border_after;

      }

      img{
        width: 80%;
      }

      h2{
        font-size: 18px;
      }

      p{
        margin-top: 10px;
        font-size: 14px;
      }
    } //profile

    .article{
      @include side;

      h1{
        @include border;
      }

      h1::after{
          @include border_after;
      }

      p{
        width: 100%;
        height: 200px;
        background-color: #004270;
        margin-bottom: 20px;
      }

      h2{
        font-size: 16px;
        text-decoration: underline;
        margin-bottom: 30px;
      }


    }

    .archive{
      @include side;

      h1{
        @include border;
      }

      h1::after{
        @include border_after;
    }

    }

  }


}

footer{
  background: #333;
  height: 100px;
  color: #FFF;
  align-items: center;
  display: flex;
  justify-content: center;
}

$(function(){
    var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
    var effect_move = 50; // どのぐらい要素を動かすか(px)
    var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000

    // フェードする前のcssを定義
    $('.scroll-fade').css({
        opacity: 0,
        transform: 'translateY('+ effect_move +'px)',
        transition: effect_time + 'ms'
    });

    // スクロールまたはロードするたびに実行
    $(window).on('scroll load', function(){
        var scroll_top = $(this).scrollTop();
        var scroll_btm = scroll_top + $(this).height();
        effect_pos = scroll_btm - effect_pos;

        // effect_posがthis_posを超えたとき、エフェクトが発動
        $('.scroll-fade').each( function() {
            var this_pos = $(this).offset().top;
            if ( effect_pos > this_pos ) {
                $(this).css({
                    opacity: 1,
                    transform: 'translateY(0)'
                });
            }
        });
    });
});

以上どなたかなぜjQueryがうまく動かないのかご教授いただければ幸いです。

yambejp

2021/12/13 07:41 編集

どこのなにをどうしたときにどんな感じでふわっと表示させるのでしょうか？

reirei0727x

2021/12/13 08:17

質問いただきありがとうございます。また、わかりにくい文章になっておりすみません。 .load-upクラスをロードした際にだんだん表示させるようなjQueryのコードを書きたいです。

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

回答2件

自己解決

参考サイトの間違い
HTML,CSS,jsファイルを参照したサイトを間違っておりうまく噛み合っていなかった。

サイト文を無感情にコピペするのではなく、コピペした後なぜこの処理が走るのかを考えると起こらないミスでした。
大変失礼いたしました。

投稿2021/12/13 08:31

reirei0727x

総合スコア0

なんとも言えませんがjavascriptがないから処理されないのでは？

javascript
1<script>
2$(function(){
3  $('#hoge').hide().fadeIn();
4});
5</script>
6<div id="hoge">fuwa</div>

もちろんcssだけでもkeyframeでふわっと表示させることは可能ですが。

投稿2021/12/13 07:45

yambejp

総合スコア116724

reirei0727x

2021/12/13 07:53

回答ありがとうございます！別ファイルでjavascriptは読み込んでおりますがうまく機能しません、、、本文の最後の方に記入いたしております。 jqueryの練習として使いたいのでCSSではなくjQueryでやってみたいです、、、！

yambejp

2021/12/13 07:58

script.jsはコメントアウトされていませんか？また例示されたjsソースもマークダウンがおかしくなっています

reirei0727x

2021/12/13 08:14

お忙しい中、何度も回答いただきありがとうございます＞＜やはりコメントアウト外してもダメでした、、、 jsソースが確認しにくに表示になっていてすみません、修正しておりますのでお時間ありましたらご確認よろしくお願いいたします＞＜

reirei0727x

2021/12/13 08:29

大変もうしわけございません、まったく違うサイトのHTMLとjQueryファイルを参考にしておりうまく噛み合わない処理になっておりました。 jQueryを落ち着いて１行ずつ理解しながら読むと気づきました＞＜大変初歩的かつお恥ずかしい質問にもかかわらず回答いただきありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jQuery、ふわっと表示させたいが、うまく機能しない。

関連した質問