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

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

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

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

Q&A

解決済

画面に入ったらopacityを消す

Iori
Iori

総合スコア54

jQuery

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

1回答

0グッド

0クリップ

315閲覧

投稿2022/10/08 11:00

編集2022/10/08 12:28

前提

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

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

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

実現したいこと

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

現状
イメージ説明

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

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});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

まず、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 の2つのバージョンを読み込んでます。最新のものを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});

投稿2022/10/09 04:00

hatena19

総合スコア32038

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Iori

2022/10/09 06:17

ありがとうございます。きれいにinviewしたらゆっくりopacityが1になりました!

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

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