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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

952閲覧

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

zuru17830405

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/20 04:10

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)の意味も教えていただきたいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/10/20 04:17

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

回答1

0

ベストアンサー

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}

となっているので、透明なのでは。

投稿2021/10/20 05:03

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zuru17830405

2021/10/20 05:17

連日ありがとうございます、opacity:1を追加するのを忘れていました。 助かりました。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問