アニメーションで入れているスライドが出てきてくれません

section(reaason)の赤い背景部分にslideを表示したい

上に書いてある通りsection(reason)の中にdiv class="slide"のアニメーションを表示したいです

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

jqueryでは特にエラーがありませんので正常に読み込めていると思います

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>BBB英会話スクール</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
8    <link rel="stylesheet" href="css/style.css">
9    <script src="jquery-3.6.0.min.js"></script>
10    <script src="js/jquery.inview.min.js"></script>
11    <script src="js/main.js"></script>
12  </head>
13  <body>
14    <header id="header">
15      <h1 class="site-title"><a href="index.html"><img src="images/logo-r.svg" alt=""></a></h1>
16      <nav id="navi">
17        <img class="logo" src="images/logo-w.svg" alt="">
18        <ul class="menu">
19          <li><a href="#reason">BBBが選ばれる理由</a></li>
20          <li><a href="#voise">受講生の声</a></li>
21          <li><a href="#summary">スクールの概要</a></li>
22        </ul>
23        <a class="btn" href="index.html">無料体験に申し込む</a>
24      </nav>
25      <div class="hbg">
26        <span></span>
27        <span></span>
28        <span></span>
29      </div>
30    </header>
31    <main>
32      <div id="mainvisual">
33        <div class="text">
34          <p class="title">
35            話して学ぼう！
36            <br>BBB英会話スクール
37          </p>
38          <a class="btn" href="#">無料体験はこちら</a>
39        </div>
40        <ul class="fade">
41          <li><img src="images/mainvisual1.jpg" alt=""></li>
42          <li><img src="images/mainvisual2.jpg" alt=""></li>
43          <li><img src="images/mainvisual3.jpg" alt=""></li>
44        </ul>
45      </div>
46      <section id="reason">
47        <h2 class="sec-title">BBBが選ばれる理由</h2>
48        <div class="bg">
49          <div class="slide inview-slide-left slide-left">
50            <img src="images/icon-pc.png" alt="">
51            <p>
52              <span class="title">オンライン対応</span>
53              <span class="text">24時間いつでも受講できる！</span>
54            </p>
55          </div>
56          <div class="slide inview-slide-right slide-right">
57            <img src="images/icon-teacher.png" alt="">
58            <p>
59              <span class="title">講師はネイティブ</span>
60              <span class="text">お気に入りの講師が自由に選べる！</span>
61            </p>
62          </div>
63        </div>
64      </section>
65      <section id="voice">
66
67      </section>
68      <section id="summary">
69
70      </section>
71      <div id="entry">
72
73      </div>
74    </main>
75    <footer>
76
77    </footer>
78  </body>
79</html>
80
81ーーーーーーーーーーーーーーcssーーーーーーーーーーーーーーーー
82@charset "UTF-8";
83html {
84  font-size: 100%;
85}
86body {
87  color: #333;
88  font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
89  letter-spacing: 0.1em;
90}
91img {
92  max-width: 100%;
93}
94li {
95  list-style: none;
96}
97a {
98  text-decoration: none;
99  color: #333;
100}
101.sec-title {
102  font-size: 2.25rem;
103  margin-bottom: 100px;
104  position: relative;
105  text-align: center;
106}
107/*sec-titleに擬似要素で線を引く*/
108.sec-title::after {
109  content: "";
110  width: 100px;
111  height: 3px;
112  background-color: #333;
113  display: block;
114  position: absolute;
115  bottom: -20px;
116  left: 0;
117  right: 0;
118  margin: 0 auto;
119}
120/*＝＝＝＝＝＝＝＝header＝＝＝＝＝＝＝＝＝*/
121#header {
122  height: 100px;
123  padding: 40px 0 0 50px;
124}
125#header .site-title {
126  width: 100px;
127  line-height: 1px;
128}
129#header .site-title a {
130  display: block;
131}
132/*ハンバーガーメニュー*/
133.hbg {
134  width: 100px;
135  height: 100px;
136  background-color: #ff2a2a;
137  position: fixed;
138  top: 0;
139  right: 0;
140  z-index: 30;
141  cursor: pointer;
142  transition: 0.3s;
143}
144.hbg:hover {
145  opacity: .7;
146}
147/*メニューが閉じている時の線の設定*/
148.hbg span {
149  width: 50px;
150  height: 2px;
151  background-color: white;
152  position: absolute;
153  left: 25px;
154  transition: .3s ease-in-out;/*ゆっくり始まってゆっくり終わる*/
155}
156/*1本目の線の設定*/
157.hbg span:nth-child(1) {
158  top: 36px;
159}
160/*2本目の線の設定*/
161.hbg span:nth-child(2) {
162  top: 50px;
163}
164/*3本目の線の設定*/
165.hbg span:nth-child(3) {
166  top: 64px;
167}
168/*メニューが開いている時の1本目線の設定*/
169.hbg.open span:nth-child(1) {
170  top: 47px;
171  left: 25px;
172  background-color: white;
173  transform: rotate(-45deg);
174}
175/*メニューが開いている時の2本目3本目の設定(2本まとめる)*/
176.hbg.open span:nth-child(2),
177.hbg.open span:nth-child(3){
178  top: 47px;
179  background-color: white;
180  transform: rotate(45deg);
181}
182/*閉じているメニューの設定(最初は非表示にして隠しておく)*/
183#navi {
184  width: 100%;
185  height: 100vh;
186  background-color: #ff2a2a;
187  color: white;
188  position: fixed;
189  top: 0;
190  left: 0;
191  z-index: 20;
192  opacity: 0;
193  text-align: center;
194  transition: opacity .6s ease, visibility .6s ease;
195  visibility: hidden;/*不可視状態になるが要素の領域は確保されたまま*/
196}
197/*メニューが開かれている時の設定*/
198#navi.open {
199  opacity: 1;
200  visibility: visible;/*可視状態になる*/
201}
202#navi .logo {
203  width: 100px;
204  position: absolute;
205  top: 40px;
206  left: 50px;
207}
208#navi .menu {
209  margin: 80px 0 40px 0;
210}
211#navi .menu li {
212  margin-bottom: 20px;
213}
214#navi .menu a {
215  color: white;
216  font-weight: bold;
217}
218#navi .btn {
219  width: 250px;
220  border: solid 1px white;
221  color: white;
222  display: block;
223  font-weight: bold;
224  padding: 15px 0;/*試したい*/
225  margin: 0 auto;
226  position: relative;
227  transition: .3s ease-in-out;
228}
229/*ボタンの右と下の線を擬似要素で設定*/
230#navi .btn::after {
231  content: "";
232  width: 250px;
233  border-right: solid 1px white;
234  border-bottom: solid 1px white;
235  padding: 15px 0;
236  position: absolute;
237  right: -6px;
238  bottom: -6px;
239}
240#navi .btn:hover {
241  background-color: white;
242  color: #ff2a2a;
243}
244/*＝＝＝＝＝＝＝＝main＝＝＝＝＝＝＝＝＝*/
245#mainvisual {
246  height: 720px;
247  position: relative;
248  margin-bottom: 120px;
249}
250/*テキストとボタンが画像の上に表示されるようにする*/
251#mainvisual .text {
252  z-index: 10;
253  position: absolute;
254  top: 280px;
255  left: 10%;/*試したい*/
256}
257#mainvisual .text .title {
258  font-size: 2.875rem;
259  font-weight: bold;
260  margin-bottom: 30px;
261  text-shadow: 0 4px 6px white;/*タイトルの白い影*/
262}
263#mainvisual .text .btn {
264  background-color: #ff2a2a;
265  border-bottom: 6px solid #9a0413;/*ボタンに立体感出すため*/
266  border-radius: 10px;
267  color: white;
268  font-size: 1.5rem;
269  display: block;
270  padding: 15px 35px;
271  text-align: center;
272  transition: .3s;
273  position: relative;
274}
275/*ボタンの右の矢印*/
276#mainvisual .text .btn::after {
277  content: "";
278  width: 16px;
279  height: 16px;
280  border-top: solid 3px white;
281  border-right: solid 3px white;
282  transform: rotate(45deg);
283  position: absolute;
284  top: 26px;
285  right: 30px;
286}
287#mainvisual .text .btn:hover {
288  opacity: 0.9;
289  transform: scale(1.05);/*ボタンのサイズを少し大きくする*/
290}
291/*mainvisual img(今回はCSSのアニメーションを使う)*/
292#mainvisual .fade li {
293  width: 75%;
294  position: absolute;
295  top: 0;
296  right: 0;
297  opacity: 0;/*最初は三枚の画像とも非表示にしておく*/
298  animation: fade 15s infinite;
299}
300/*画像の実行タイミングを設定*/
301#mainvisual .fade li:nth-child(1) {
302  animation-delay: 0s;
303}
304#mainvisual .fade li:nth-child(2) {
305  animation-delay: 5s;
306}
307#mainvisual .fade li:nth-child(3) {
308  animation-delay: 10s;
309}
310#mainvisual .fade li img {
311  width: 100%;
312  height: 720px;
313  object-fit: cover;
314}
315/*画像の周りをぼかす*/
316#mainvisual .fade li::after {
317  content: "";
318  position: absolute;
319  top: 0;
320  right: 0;
321  bottom: 0;
322  left: 0;
323  box-shadow: inset 0 0 20px 20px white;/*画像の内側のぼかし*/
324}
325@keyframes fade {
326  0% {
327    opacity: 0;
328  }
329  15% {
330    opacity: 1;
331  }
332  30% {
333    opacity: 1;
334  }
335  45% {
336    opacity: 0;
337  }
338  100% {
339    opacity: 0;
340  }
341}
342/*reason*/
343#reason {
344  margin-bottom: 120px;
345}
346#reason .bg {
347  background-color: #ff2a2a;
348  padding: 80px 0;
349}
350/*スライドの共通部分*/
351#reason .slide {
352  width: 50%;
353  display: flex;
354  align-items: center;
355  justify-content: center;
356  background-color: white;
357  padding: 5%;
358  opacity: 0;
359}
360#reason .slide img {
361  width: auto;
362  height: 60px;
363  margin-right: 30px;
364}
365#reason .slide .title {
366  color: #ff2a2a;
367  display: block;
368  font-size: 1.75rem;
369  font-weight: bold;
370}
371#reason .slide .text {
372  display: block;
373  font-size: 1.125rem;
374}
375#reason .inview-slide-left {
376  border-top-right-radius: 20px;
377  border-bottom-right-radius: 20px;
378  margin-bottom: 40px;
379}
380/*アニメーションを設定*/
381#reason .slide-left {
382  animation: slide-left .5s ease-out 0s 1 forwards;
383}
384@keyframes slide-left {
385  0% {
386    transform: translateX(-50%);
387  }
388  100% {
389    transform: translateX(0);
390  }
391}
392#reason .inview-slide-right {
393  border-top-left-radius: 20px;
394  border-bottom-left-radius: 20px;
395}
396#reason .slide-right {
397  animation: slide-right 0.5s ease-out 0s 1 forwards;
398}
399@keyframes slide-right {
400  0% {
401    transform: translateX(150%);
402  }
403  100% {
404    transform: translateX(100%);
405  }
406}
407
408ーーーーーーーーーーーーーーjqueryーーーーーーーーーーーーーー
409'use strict';
410
411$(function(){
412
413  $('.hbg').on('click',function(){
414    hbg();
415  });
416  $('#navi a').on('click',function(){
417    hbg();
418  });
419
420  $('.inview-slide-left').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
421    if(isInView) {
422      $(this).stop().addClass('slide-left');
423    }
424  });
425  $('.inview-slide-right').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
426    if(isInView) {
427      $(this).stop().addClass('slide-right');
428    }
429  });
430});
431
432
433//ハンバーガーメニューの共通処理
434function hbg(){
435  $('.hbg').toggleClass('open');
436
437  if($('.hbg').hasClass('open')){
438    $('#navi').addClass('open');
439  }else{
440    $('#navi').removeClass('open');
441  }
442}

試したこと

入力ミスがないかの確認、html,cssにもしっかりjqueryで使っているものがミスなく入力されているかの確認

補足情報（FW/ツールのバージョンなど）

模写コーディングでまでJSを始めたばっかで検証ツールを確認しながらやっています。
もしよければ一緒にfunction(event, isInView, visiblePartX, visiblePartY)の意味も教えていただきたいです

yambejp

2021/10/20 04:17

もっと問題を絞ってソースを提示くださいあまりに丸投げ過ぎて何をどうしたいかわかりません

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

回答1件

ベストアンサー

css
1#reason .slide {
2    width: 50%;
3    display: flex;
4    align-items: center;
5    justify-content: center;
6    background-color: white;
7    padding: 5%;
8    opacity: 0;
9}