実現したいこと
タブ切り替えと無限ループアニメーションの連動の仕方が分からない。
（例）アイスクリームのタブを押したらアイスクリームだけの無限ループアニメーションだけが流れるようにする。チョコレートのタブを押したらチョコレートだけの無限ループアニメーションができるようにする。
発生している問題・分からないこと
タブ切り替えの実装、無限ループアニメーションの実装はできたが連動できない。
該当のソースコード
HTML
1 <section id="intro-act"> 2 <div id="intro-act-inner"> 3 <h2>食べ物紹介</h2> 4 <img class="line" src="img"> 5 6 <div class="tab-wrap"> 7 <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">アイスクリーム</label> 8 <div class="tab-content"> 9 <p>アイスクリームは甘くておいしいです。</p> 10 11 </div> 12 <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">チョコレート</label> 13 <div class="tab-content"> 14 <p>チョコレートは甘くておいしいです</p> 15 </div> 16 17 18 <div id="slider-wrapper" class="tab-content" checked="checked"> 19 <ul class="slider"> 20 <li class="slide"> 21 <img src="png" alt="" /> 22 </li> 23 <li class="slide"> 24 <img src="png" alt="" /> 25 </li> 26 <li class="slide"> 27 <img src="png" alt="" /> 28 </li> 29 <li class="slide"> 30 <img src="png" alt="" /> 31 </li> 32 </ul> 33 <ul class="slider" class="tab-content"> 34 <li class="slide"> 35 <img src="png" alt="" /> 36 </li> 37 <li class="slide"> 38 <img src="png" alt="" /> 39 </li> 40 <li class="slide"> 41 <img src="png" alt="" /> 42 </li> 43 <li class="slide"> 44 <img src="png" alt="" /> 45 </li> 46 </ul> 47 </div> 48 49 <div id="slider-wrapper" class="tab-content"> 50 <ul class="slider"> 51 <li class="slide"> 52 <img src="png" alt="" /> 53 </li> 54 <li class="slide"> 55 <img src="png" alt="" /> 56 </li> 57 <li class="slide"> 58 <img src="png" alt="" /> 59 </li> 60 <li class="slide"> 61 <img src="png" alt="" /> 62 </li> 63 </ul> 64 <ul class="slider"> 65 <li class="slide"> 66 <img src="png" alt="" /> 67 </li> 68 <li class="slide"> 69 <img src="png" alt="" /> 70 </li> 71 <li class="slide"> 72 <img src="png" alt="" /> 73 </li> 74 <li class="slide"> 75 <img src="png" alt="" /> 76 </li> 77 </ul> 78 </div> 79 80 </div> 81 </section>
css
1 /* intro-act */2 3 #intro-act {4 background-color: #fff;5 margin-top: 337px;6 padding-top: 80px;7 border-radius: 0 100px 100px 0;8 box-shadow: 1px 1px 10px #00000029;9 margin-right: 203px;10 }11 12 #intro-act-inner {13 position:relative;14 }15 16 #intro-act-inner h2 {17 color: #555555;18 font-size:40px;19 letter-spacing: 4px;20 margin-left:203px;21 22 } 23 24 #intro-act-inner .line {25 width:172px;26 height:auto;27 position:absolute;28 top:40px;29 margin-left:203px;30 31 }32 33 .tab-wrap {34 display: flex;35 flex-wrap: wrap;36 margin-left:203px;37 38}39.tab-label {40 color:#F7B560;41 background:#FFFFFF;42 margin-right: 5px;43 padding: 3px 12px;44 order:-1;45 box-shadow: 0px 3px 6px #00000029;46 padding:23px 75px 22px 75px;47 border-radius:20px;48 margin-right:19px;49 font-weight: bold;50 margin-top: 30px;51}52.tab-content {53 width: 100%;54 display: none;55 margin-top: 50px;56}57 58.tab-content p {59 font-size: 16px;60 color:#555555;61 font-weight: bold;62 margin-bottom: 0;63 padding-bottom: 69px;64}65 66.tab-switch:checked+.tab-label {67 background:#93C572;68 color:#FFFFFF;69 font-weight: bold;70}71.tab-switch:checked+.tab-label+.tab-content {72 display: block;73}74 75.tab-switch {76 display: none;77}78 79/* スライダー全体 */80#slider-wrapper {81 display: flex; /* スライドのグループを横並び */82 overflow: hidden; /* はみ出たスライドを隠す */83 margin-right: 50px;84 padding-bottom: 80px;85}86/* スライド3枚のグループ */87.slider {88 animation: scroll-left 20s infinite linear .5s both;89 display: flex; /* スライド3枚を横並び */90 padding-left:0;91}92/* スライド */93.slide {94 width: calc(100vw / 4); /* 3はスライドの枚数 */95}96/* スライドの画像 */97.slide img {98 display: block;99 width: 300px;100 height:auto;101 margin-left: 24px;102}103/* CSSアニメーション */104@keyframes scroll-left {105 from {106 transform: translateX(0);107 }108 to {109 transform: translateX(-100%);110 }111}112 113
試したこと・調べたこと
上記の詳細・結果
GoogleやYahoo等で調べましたが回答は得られませんでした。
補足
特になし
0 コメント