前提・実現したいこと
簡単なアニメーションサイトを作成しています。
チェックボックスを使用したハンバーガーメニューがあり、
チェックボックスがチェックされた状態でアニメーションをOFFにしたいのですが、
class="loader"の**display:none;**が効きません。
発生している問題・エラーメッセージ
display:none;が効かない。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="index.css"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <script src="https://kit.fontawesome.com/2b3eef8600.js" crossorigin="anonymous"></script> 8 <script 9 src="https://code.jquery.com/jquery-3.5.1.min.js" 10 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 11 crossorigin="anonymous"></script> 12 <title>css hover Effect</title> 13</head> 14<body> 15 <nav> 16 <input type="checkbox" id="menu" class="checkbox"> 17 <label for="menu" class="nav_open"><i class="fa fa-bars" aria-hidden="true"></i></label> 18 <label for="menu" class="nav_close"></label> 19 <label class="logo"><a href="#" class="logo">Push</a></label> 20 <ul class="top_banner"> 21 <li><a class="active" href="#">ホーム</a></li> 22 <li><a href="#">会社概要</a></li> 23 <li><a href="#">事業内容</a></li> 24 <li><a href="#">お問い合わせ</a></li> 25 <li><a href="#">採用情報</a></li> 26 </ul> 27 </nav> 28 29<!-- ここがアニメーション要素です--> 30 <div class="loader_area"> 31 <div class="loader" id="loader"> 32 <span></span> 33 <span></span> 34 <span></span> 35 <span></span> 36 </div> 37 </div> 38 39 <div class="bgv_area"> 40 <video src="video.mp4" playsinline type="video/mp4" loop="" 41 autoplay="" muted="" width="100%" class="bgv"> 42 </video> 43 44 <ul class="bgv_description"> 45 <li class="fadeInUp">テスト・テスト・テスト</li> 46 <li class="fadeInUp">テスト・テスト・テスト</li> 47 <li class="fadeInUp">テスト・テスト・テスト</li> 48 </ul> 49 </div> 50 51 <script> 52 $(function(){ 53 function animation(){ 54 $('.fadeInUp').each(function(){ 55 var target = $(this).offset().top; 56 var scroll = $(window).scrollTop(); 57 var windowHeight = $(window).height(); 58 if (scroll > target - windowHeight){ 59 $(this).css('opacity','1'); 60 $(this).css('transform','translateY(0)'); 61 } 62 }); 63 } 64 animation(); 65 $(window).scroll(function (){ 66 animation(); 67 }); 68}); 69 </script> 70 71</body> 72</html>
CSS
1 2* 3{ 4 margin: 0; 5 padding:0; 6 box-sizing: border-box; 7} 8/* ナビゲーション */ 9 10label.logo a{ 11 color: white; 12 font-size: 50px; 13 line-height: 80px; 14 font-weight: 600; 15 text-decoration: none; 16 margin-right:50px; 17} 18nav{ 19 display: flex; 20 background-color: black; 21 width: 100%; 22 top:0; 23 justify-content: center; 24} 25 26.nav_open, 27.nav_close{ 28 display:none; 29} 30 31input[type="checkbox"] { 32 position: absolute; 33 left: -50vw; 34} 35 36 37.fa.fa-bars{ 38 width:60px; 39 height:60px; 40 font-size: 25px; 41 color: white; 42 cursor: pointer; 43 line-height: 80px; 44 text-align: center; 45} 46nav ul{ 47 float: right; 48 margin-right: 60px; 49} 50nav ul li{ 51 display: inline-block; 52 line-height: 80px; 53 margin: 0 2px; 54} 55nav ul li a{ 56 color: #f2f2f2; 57 text-decoration: none; 58 font-weight: 600; 59 font-size: 20px; 60 padding: 7px 15px; 61 text-transform: uppercase; 62 text-decoration: none; 63} 64a.active,a:hover{ 65 transition: .5s; 66 border-radius: 10% 100% 100% 0% / 0% 50% 50% 0% ; 67} 68 69 #menu[type=checkbox]:checked { 70 width: 15px; 71 height: 15px; 72 } 73 74 75.bgv_area{ 76 position: relative; 77 background-color: #000; 78} 79.bgv_area::after{ 80 position: absolute; 81 background-color: #000; 82 top:0; 83 left:0; 84 bottom: 0; 85 left: 0; 86} 87.bgv{ 88 opacity: 0.6; 89} 90.bgv_description{ 91 position: absolute; 92 min-width:150px; 93 min-height: 200px; 94 top: 50%; 95 left: 50%; 96 transform: translateY(-50%) translateX(-50%); 97 -webkit-transform: translateY(-50%) translateX(-50%); 98 color: white; 99 font-family: 'メイリオ'; 100 list-style: none; 101 font-size: 40px; 102 padding: 40px 10px; 103} 104.fadeInUp { 105 opacity : 0; 106 transform: translateY(100px); 107 transition: 2s; 108} 109 110.bgv_description li{ 111 text-shadow:1px 1px 3px #000000; 112 white-space: nowrap; 113} 114 115.bgv_description li:nth-child(1){ 116 margin: 50px -30px 0; 117} 118.bgv_description li:nth-child(2){ 119 margin: 50px 0px; 120} 121.bgv_description li:nth-child(3){ 122 margin: 50px 30px; 123} 124 125 126 127 128/* ナビゲーションSP ver */ 129@media screen and (max-width:1080px) { 130 .nav_open, 131 .nav_close{ 132 display: block; 133 } 134 .top_banner{ 135 display:none; 136 } 137 138 .fa.fa-bars{ 139 position: fixed; 140 bottom: 0; 141 left: 0; 142 width: 120px; 143 height: 120px; 144 font-size: 60px; 145 z-index: 2; 146 } 147 label.logo a{ 148 margin-right:0; 149 } 150 151/* アニメーション要素*/ 152 #menu[type="checkbox"]:checked ~ ul{ 153 position: fixed; 154 top: 15%; 155 left: 0; 156 width: 100vw; 157 height: 100vh; 158 display: inline-flex; 159 flex-direction: column; 160 text-align: center; 161 z-index: 1; 162 animation-name: animation1; 163 animation-duration: 0.5s; 164 } 165 @keyframes animation1 { 166 0% { 167 left: -30vw; 168 } 169 100% { 170 left: 0; 171 } 172 } 173 174 /* ここのアニメーション要素が非表示になりません */ 175 #menu[type="checkbox"]:checked ~ .loader{ 176 display: none; 177 } 178 179 180 181 nav ul li a{ 182 font-weight: 800; 183 font-size: 40px; 184 } 185 186 /* 動画背景と文字*/ 187 .bgv_description{ 188 font-size: 15px; 189 white-space: nowrap; 190 padding: 0; 191 } 192 .fadeInUp { 193 transform: translateY(50px); 194 } 195 li:nth-child(1){ 196 margin: 5px -7.5px 0; 197 } 198 li:nth-child(2){ 199 margin: 5px 0px; 200 } 201 li:nth-child(3){ 202 margin: 5px 7px; 203 } 204 li:nth-child(4){ 205 margin: 0 22.5px; 206 } 207} 208 209 210/* ロードエリア */ 211.loader_area{ 212 justify-content: center; 213 align-items: center; 214 min-height: 100vh; 215 background: #000; 216 display: flex; 217} 218.loader{ 219 position:relative; 220 width: 200px; 221 height: 200px; 222 overflow: hidden; 223 -webkit-box-reflect: below 1px linear-gradient(transparent,#0005); 224} 225 226.loader:hover{ 227 background:#03e9f4; 228 229 box-shadow:0 0 150px 20px #03e9f4; 230 /* 軽量化のため下記実装は保留 231 0 0 5px #03e9f4, 232 0 0 25px #03e9f4, 233 0 0 50px #03e9f4, 234 0 0 200px #03e9f4, 235 0 0 400px #03e9f4; */ 236} 237.loader span{ 238 position: absolute; 239 display: block; 240} 241.loader span:nth-child(1){ 242 top: 0; 243 left: -100%; 244 width: 100%; 245 height: 40px; 246 background: linear-gradient(90deg, transparent,#03e9f4); 247 animation: animate1 1s linear infinite; 248} 249@keyframes animate1{ 250 0% 251 { 252 left: -100%; 253 } 254 100%{ 255 left: 100%; 256 } 257} 258 259.loader span:nth-child(3){ 260 bottom: 0; 261 left: -100%; 262 width: 100%; 263 height: 40px; 264 background: linear-gradient(90deg, transparent,#03e9f4); 265 animation: animate3 1s linear infinite; 266 animation-delay: 1s; 267} 268@keyframes animate3{ 269 0% 270 { 271 left: 100%; 272 } 273 100%{ 274 left: -100%; 275 } 276} 277 278.loader span:nth-child(2){ 279 right: 0; 280 top: -100%; 281 width: 40px; 282 height: 100%; 283 background: linear-gradient(90deg, transparent,#03e9f4); 284 animation: animate2 1s linear infinite; 285 animation-delay: 0.5s; 286} 287@keyframes animate2{ 288 0% 289 { 290 top: -100%; 291 } 292 100%{ 293 top: 100%; 294 } 295} 296 297.loader span:nth-child(4){ 298 left: 0; 299 top: 100%; 300 width: 40px; 301 height: 100%; 302 background: linear-gradient(90deg, transparent,#03e9f4); 303 animation: animate4 1s linear infinite; 304 animation-delay: 1.5s; 305} 306@keyframes animate4{ 307 0% 308 { 309 top: 100%; 310 } 311 100%{ 312 top: -100%; 313 } 314} 315 316 317.bgv_area{ 318 width: 100%; 319} 320
試したこと
①最低限のコードでテストをしてみたのですが、display:none;は適用できていました。↓
codepen
②teratailに貼り付けたコードで、Google Chromeの検証ツールで、loader要素をdisplay:none;にしたところ、きちんと反映されていました。
補足情報(FW/ツールのバージョンなど)
①おそらく何かしら他の要素が邪魔して適用されていない
②記述方法に誤りがある
っと仮説をたててたのですが・・・何度もトライしても解決できていません。
アドバイスいただけますと幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/03 05:28
2020/08/04 04:44