画面に入ったらopacityを消す

前提

こちらの記事を真似しています。
https://coco-factory.jp/ugokuweb/animatecss/

jquery.inviewとanimate.cssを使っています。

Hello, worldがちゃんと起動するのでインストールはしっかりできています。

実現したいこと

４つのboxが画面に入ったときにopacityを１=second-inviewクラスを消してopacity１になるようにしたいです。

現状

発生している問題・エラーメッセージ

boxが何も変化しません...

該当のソースコード

html
1    <link rel="stylesheet" href="style.css">
2    <!-- ANIMATE -->
3    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
4</head>
5<body>
6
7
8
9<!-- NAVBAR -->
10  <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
11    <div class="container-fluid">
12      <a class="navbar-brand" href="index.html">Navbar</a>
13
14
15      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
16        <span class="navbar-toggler-icon bar1  "></span>
17        <span class="navbar-toggler-icon bar2  "></span>
18        <span class="navbar-toggler-icon bar3  "></span>
19
20      </button>
21
22
23      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
24        <ul class="navbar-nav ">
25          <li class="nav-item">
26            <a class="nav-link active" aria-current="page" href="#">Home</a>
27          </li>
28          <li class="nav-item">
29            <a class="nav-link" href="#">Features</a>
30          </li>
31          <li class="nav-item">
32            <a class="nav-link" href="#">Pricing</a>
33          </li>
34          <!-- <li class="nav-item">
35            <a class="nav-link disabled" href="#" tabindex="1" aria-disabled="true">Disabled</a>
36          </li> -->
37        </ul>
38      </div>
39    </div>
40  </nav>
41
42<!-- HEADER -->
43    <header>
44
45      <!-- FIRST ANIMATION -->
46      <h2 class="inview">Hello, world!!</h2>
47
48      <!-- MAIN HEADER -->
49      <div class="container ">
50        <div class="row second-inview">
51          <div class="row-item1"></div>
52          <div class="row-item2"></div>
53          <div class="row-item3"></div>
54          <div class="row-item4"></div>
55
56        </div>
57      </div>
58
59
60
61    </header>
62
63    <!-- MAIN -->
64<main>
65
66
67  <h2>hi</h2>
68</main>
69
70
71<!-- FOOTER -->
72<footer></footer>
73
74<!-- jQuery -->
75<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
76
77<!-- inview library -->
78<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
79<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
80<script src="js/3-1-2.js"></script>　
81  
82<script src="index.js"></script>
83</body>
84</html>

css
1* {
2    margin: 0;
3    padding: 0;
4
5}
6
7
8
9/* NAVBAR */
10nav {
11    /* background-color: #FF5D5D; */
12        background-color: #F0662B;
13    /* background: linear-gradient(#FF5D5D, #FFE3A9); */
14}
15
16/* 文字 */
17nav a {
18    color: #fff;
19    padding-left: 20px;
20}
21
22
23.container-fluid {
24    padding: 0;
25}
26
27.navbar-collapse {    
28}
29
30/* 文字 */
31.navbar-nav {
32    /* background-color: #FFE3A9; これあるとlaptop幅でダサくなる*/
33    padding-left: 25px;
34}
35
36.nav-link {
37    color: #fff;
38}
39
40
41
42.navbar-toggler {
43    position: relative;
44    width: 60px;
45    height: 50px;
46    /* border: 5px solid #444; */
47    box-sizing: border-box;
48    border-color: rgba(0,0,0,0);
49    margin-right: 10px;
50    border-color: #fff;
51
52}
53
54.collapsed {
55    border-color: #fff;
56}
57
58.navbar-toggler-icon {
59    display: block;
60    width: 30px;
61    height: 3px;
62    border-radius: 30px;
63    color: #fff;
64    position: absolute;
65    left: 14px;
66    transition: all 0.5s ease;
67}
68
69.bar1 { 
70    /* top: 6.25px; */
71    top: 8px;
72    background-color:#fff;
73  }
74  .bar2 {
75    top: 17.5px;
76    top: 20px;
77    background-color:#fff;
78  }
79  .bar3 {
80    /* bottom: 6.25px; */
81    bottom: 12px;
82    /* bottom: 20px; */
83    background-color:#fff;
84  }
85
86
87
88
89/* HEADER */
90header {
91    margin-top: 60px;
92    height: 500px;
93    background-color: #FFE3A9;
94    text-align: center;
95    position: relative;
96}
97
98/* 外では見えなくする */
99.inview {
100    opacity: 0;
101}
102
103header h2{
104    padding-top: 50vh;
105}
106
107/* MAIN HEADER */
108
109.row-item1, .row-item2, .row-item3, .row-item4 {
110    width: 100px;
111    height: 100px;
112    position: absolute;
113}
114
115.row-item1 {
116    background-color: blue;
117    top: 0px;
118    left: 0px;
119
120}
121
122.row-item2 {
123    background-color: purple;
124    top: 100px;
125    left: 200px;
126}
127
128.row-item3 {
129    background-color: red;
130    top: 200px;
131    left: 400px;
132
133}
134.row-item4 {
135    background-color: grey;
136    top: 300px;
137    left: 600px;
138
139}
140
141/* 最初は見えない */
142
143.second-inview {
144    opacity: 0.2;
145}
146
147/* MAIN */
148main {
149    height: 100vh;
150}

JavaScript
1//   whenとdoneを使ってみたい
2
3// $(function() {
4    // $.when(
5
6        $(function firstAnimation() {
7            $('.inview').on('inview', function (event, isInview) {
8              if(isInview) {
9                $(this).removeClass('inview');
10                $(this).addClass('animate__animated animate__swing animate__delay-3s animate__infinite');
11              } else {
12                $(this).removeClass('animate__animated animate__swing animate__delay-3s animate__infinite');
13
14                // ????
15                $(this).addClass(inview);
16              }
17            });
18          
19          })    
20          
21          
22
23    // ) .done(function() {
24
25        // $(this).addClass(second-inview);
26
27
28//     })
29// })
30
31  
32$(function() {
33    $('.second-inview').on('inview', function(event, isInview) {
34        if(isInview) {
35            $(this).removeClass(second-inview);
36        } else {
37           $(this).addClass(second-inview);
38        }
39    })
40});

m.ts10806

2022/10/08 11:15 編集

本件とは無関係のタグですので、外してください。 https://teratail.com/tags/Animate%20CC

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

回答1件

ベストアンサー

まず、jQuery を2回読み込んでますが、これはやめましょう。

html
1<!-- jQuery -->
2<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
3
4<!-- inview library -->
5<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

上記の部分、3.5.1 と 3.4.1 の２つのバージョンを読み込んでます。最新のものを１つだけ読み込むようにします。
下記のページからコピーすることができます。
jQuery CDN
最新は、3.6.1 です。

html
1<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

何をしたいのか質問からはよくわからないのですが、
.row-item1, .row-item2, .row-item3, .row-item4 のボックスが画面内に入ったら、
透明度を 0.2 から 1 にアニメーションしたいのなら、下記のようなコードになります。

html
1    <div class="row">
2      <div class="row-item1 second-inview"></div>
3      <div class="row-item2 second-inview"></div>
4      <div class="row-item3 second-inview"></div>
5      <div class="row-item4 second-inview"></div>
6    </div>

css
1/* 最初は見えない */
2
3.second-inview {
4  opacity: 0.2;
5}
6.row-item1,
7.row-item2,
8.row-item3,
9.row-item4 {
10  transition: opacity 2s;
11}

JavaScript
1$(function () {
2  $(".row > div").on("inview", function (event, isInview) {
3    if (isInview) {
4      $(this).removeClass("second-inview");
5    } else {
6      $(this).addClass("second-inview");
7    }
8  });
9});