jQueryのInVeiwが機能しない

前提・実現したいこと

初心者です。jQueryを使い、下へスクロールして当該ページを表示した時にフェードイン（当該ページを離れたたらフェードアウト）するようにしたいのですが、全く反応がなく困っています。自身で調べてjQueryのバーションは下げてみました（何も知らずに３.Xを使っていましたが1.4へ）がこれも変化なしです。
ソースコードの「＊ここから」〜「＊ここまで」の部分をフェードインしたいです。どうぞよろしくお願いします。

該当のソースコード
<HTML>

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>TITLE</title> <meta name="Description" cotent="#"> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="responsive.css"> <script src="jquery-migrate-1.4.1.min.js"></script> <script src="jquery.inview-master/jquery.inview.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <div id="header-left"> <div class="header-title">Hey's Atelier</div> </div> <div id="header-right"> <div id="header-nav"> <ul> <li class="header-list"><a href="#">Introduction</a></li> <li class="header-list"><a href="#">Philosophy</a></li> <li class="header-list"><a href="#">Works</a></li> <li class="header-list"><a href="#">Contact</a></li> </ul> </div> </div> </div>

<!----ここからメイン-->
<div id="main-contents">
  <div id="slider">
  </div>
  <div id="main">
    <div id="intro" class="back-image">
      <div id="intro-title" class="intro-title">Introduction</div>
      <div class="sub-title">＃＃＃＃＃＃＃＃＃</div>   
        <div id="intro-block">  
    「＊ここから」<div id="intro-photo" class="inview is-show">
              <div class="intro-exp">
                <p>WEBデザイナー。</p>
                <p>“＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃。</p>
    「＊ここまで」</div>
            </div>
        </div>
    </div>

<CSS> #main-contents{ max-width: 1300px; width: 100%; margin: 0 auto; }

#slider{
max-width: 1000px;
width: 100%;
height: 600px;
margin: 10px auto ;
box-sizing: border-box;
background-image: url('images-png/top-page1.png');
background-size: cover;
background-position:center center;
}

#intro{
width: 1300px;
margin: 0;
padding:0;
background-image: url('images-png/macbook.png');
background-color: black;
}
.back-image{
min-width: 100vw;
min-height: 100vh;
background-size: cover;
background-position: center top;
}
#intro-title{
height:40px;
background-color: orangered;
color: white;
font-style: italic;
margin: 0;
}
.intro-title{
font-size: 32px;
padding-left: 40px;
}
.sub-title{
font-size:48px;
font-style:italic;
font-weight: bold;
margin-top:-0px;
padding-top: 32px;
padding-left: 40px;
color: white;
}
#intro-block{
width: 100%;

}
#intro-photo{
width: 52%;
height: 100%;
padding-left: 40px;
background-color: white;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;

}
.inview{
opacity: 0;
transform: translate( -50%,0);
}
.inview .is-show{
transition: all 2s ease-in;
opacity: 1;
transform: translate(0,0);
}

.intro-exp {
padding-left: 48px;
font-size: 18px;
line-height: 3.0em;

}
<js>
$(function(){
$('.inview').on("inview", function (event, isInView) {
if (isInView) {
$(this).addClass("is-show");
} else {
$(this).removeClass("is-show");
}
});
});

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

回答1件

ベストアンサー

jQueryを読み込んでいないように見えます。

js
1<script src="jquery-migrate-1.4.1.min.js"></script> ←これはjQueryではないです。
2<script src="jquery.inview-master/jquery.inview.min.js"></script>
3<script type="text/javascript" src="script.js"></script>