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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

1114閲覧

イラストのようなアニメボタンをCSSで作成したい。

Yuki2

総合スコア52

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2021/03/26 18:37

ボタンの円が回りきった時に次のスライドを表示するオートスライダーのボタンを作りたい。

ボタンの外側にある円が時計回りにスタートして一周したタイミングで処理を行うためのボタンを作りたい。

  1. 次のスライドを表示する。
  2. そのボタンのアニメを次のボタンに渡す。
  3. 5-10秒を目安に円が一周回るようにする。

該当のソースコード

HTML

1 <div id="my-my-carousel"> 2 <div id="my-carousel"> 3 <p class="my__ac-text">テキスト<span class="my__arrow right-arrow"></span></p> 4 <div class="my__btn-wrapper"> 5 <label class="checked" for=""> 6 <span class="spinner"></span> 7 <input type="radio" name="position" data-position="1" checked /> 8 </label> 9 <label for=""> 10 <input type="radio" name="position" data-position="2" /> 11 </label> 12 <label for=""> 13 <input type="radio" name="position" data-position="3" /> 14 </label> 15 <label for=""> 16 <input type="radio" name="position" data-position="4" /> 17 </label> 18 </div> 19 </div> 20 <div id="carousel"> 21 <div class="item"><img src="/images/sample.png" alt=""></div> 22 <div class="item"><img src="/images/sample.png" alt=""></div> 23 <div class="item"><img src="/images/sample.png" alt=""></div> 24 <div class="item"><img src="/images/sample.png" alt=""></div> 25 </div> 26 </div>

SCSS

1#my-my-carousel { 2 padding-bottom: 9rem; 3 transform: translateX(-22rem); 4 5 #my-carousel { 6 margin: 0; 7 display: flex; 8 align-items: center; 9 gap: 2.4rem; 10 margin-left: 73%; 11 transform: translateY(5rem); 12 } 13 14 .my__ac-text { 15 font-weight: bold; 16 font-size: 14px; 17 line-height: 110%; 18 letter-spacing: 0.04em; 19 color: $color2; 20 flex: 0 1 65%; 21 } 22 23 .my__arrow { 24 padding-left: 0.6em; 25 } 26 27 .my__arrow::after { 28 color: $color1; 29 } 30 31 .my__btn-wrapper { 32 flex: 1; 33 display: flex; 34 align-items: center; 35 } 36 37 .my__btn-wrapper label { 38 width: 8px; 39 height: 8px; 40 border-radius: 50%; 41 background-color: $color4; 42 margin-right: 2.4rem; 43 position: relative; 44 cursor: pointer; 45 } 46 47 .my__btn-wrapper input { 48 position: absolute; 49 opacity: 0; 50 cursor: pointer; 51 top: 50%; 52 left: 50%; 53 transform: translate(-50%, -50%); 54 } 55 56 #carousel { 57 height: 300px; 58 display: flex; 59 align-items: flex-end; 60 justify-content: center; 61 --items: 4; 62 --middle: 3; 63 --position: 1; 64 pointer-events: none; 65 } 66 div.item { 67 position: absolute; 68 --r: calc(var(--position) - var(--offset)); 69 --abs: max(calc(var(--r) * -1), var(--r)); 70 transition: all 0.25s linear; 71 transform: translateX(calc(-530px * var(--r))); 72 } 73 74 div.item { 75 width: 400px; 76 height: 200px; 77 img { 78 transition: all 0.2s; 79 height: 100%; 80 width: auto; 81 } 82 } 83 84 div.item:nth-of-type(1) { 85 --offset: 1; 86 } 87 div.item:nth-of-type(2) { 88 --offset: 2; 89 } 90 div.item:nth-of-type(3) { 91 --offset: 3; 92 } 93 div.item:nth-of-type(4) { 94 --offset: 4; 95 } 96 .large { 97 height: 300px !important; 98 width: 600px !important; 99 transition: all 0.2s; 100 margin: 0 8rem; 101 transition: height all 1s; 102 img { 103 transition: all 0.2s; 104 105 height: 100%; 106 width: auto; 107 } 108 } 109} 110 111.checked { 112 // border: 4px solid $color1; 113 width: 16px; 114 height: 16px; 115 position: relative; 116 // background: $color1; 117 // opacity: 1; 118 // border-right: none; 119 // // border-top: none; 120 // // border-left: none; 121 // z-index: 2000; 122 // background-color: transparent; 123 // border-radius: 100%; 124 // // transform: rotateZ(0); 125 // -webkit-animation: spin 2s linear infinite; 126 // animation: spin 2s linear infinite; 127} 128 129label .spinner { 130 border: 1px solid $color1; 131 width: 18px !important; 132 height: 18px !important; 133 134 position: absolute; 135 top: -0.5rem; 136 left: -0.5rem; 137 background: $color1; 138 opacity: 1; 139 border-right: none; 140 // border-top: none; 141 // border-left: none; 142 z-index: 2000; 143 background-color: transparent; 144 border-radius: 100%; 145 // transform: rotateZ(0); 146 -webkit-animation: spin 3s linear infinite; 147 animation: spin 3s linear infinite; 148} 149 150@-webkit-keyframes spin { 151 from { 152 transform: rotateZ(0deg) scale(1); 153 } 154 50% { 155 transform: rotateZ(540deg) scale(0.9); 156 border-color: #0099ff; 157 } 158 to { 159 transform: rotateZ(1080deg) scale(1); 160 } 161} 162 163@keyframes spin { 164 from { 165 transform: rotateZ(0deg) scale(1); 166 } 167 50% { 168 transform: rotateZ(540deg) scale(0.9); 169 border-color: #0099ff; 170 } 171 to { 172 transform: rotateZ(1080deg) scale(1); 173 } 174}

JS

1document.querySelectorAll('#my-carousel input').forEach(ipt => { 2 const carousel = document.getElementById('carousel'); 3 ipt.addEventListener('click', () => { 4 carousel.style.setProperty('--position', ipt.dataset.position); 5 Array.from(carousel.children).forEach(child => child.classList.remove('large')); 6 carousel.children[ipt.dataset.position - 1].classList.add('large'); 7 }); 8}); 9 10const newsBtns = document.querySelectorAll('.my__btn-wrapper > *'); 11console.log(newsBtns, "newsBtns"); 12newsBtns.forEach(d => { 13 d.addEventListener('click', function (e) { 14 console.log(e.target, "e.target"); 15 const clickedElement = e.target; 16 17 const spinElement = document.querySelector(".spinner"); 18 console.log(spinElement, "spinElement"); 19 20 spinElement.classList.remove("spinner"); 21 console.log(spinElement, "spinElement"); 22 23 const sp = document.createElement("span"); 24 sp.classList.add("spinner"); 25 console.log(sp, "sp"); 26 27 clickedElement.parentNode.insertBefore(sp, clickedElement); 28 29 }); 30});

作りたいアニメボタン

イメージ説明

現在使用しているcssボタンのイラストをこのイラストに変更したいです。

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

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

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

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

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

Lhankor_Mhy

2021/03/27 00:33

わからないところはどこですか?
hatena19

2021/03/27 01:55 編集

SCSS 変数、CSS 変数の宣言もコードに含めてください。 それがないと、こちらで検証できません。 あと、画像のサイズも提示してください。
guest

回答1

0

ベストアンサー

'●'の要素をcreateElementする発想でアニメしてみました。
しかし汎用的な値を探しきれずFirefoxとchromeでちょっとズレがあります。
これはFirefoxを想定して設定。

html

1<style type='text/css'> 2.my-design { 3 color: #0099ff; 4 font-size: 200px; 5 position: absolute; 6} 7</style> 8 9<script> 10var rad = 4.7; 11var pace = 0.05; 12var times = 125; 13const sizeDiv = 8; 14 15const progressTimer = setInterval(progressTick, 20); 16function progressTick() { 17 const elemCenter = document.getElementById('circleprogress'); 18 const elemCenterSize = elemCenter.offsetWidth; 19 const circleBase = elemCenterSize / 1.5 + (elemCenterSize / sizeDiv); 20 const posX = circleBase * Math.cos(rad); 21 const posY = circleBase * Math.sin(rad); 22 rad += pace; 23 rad %= 2 * Math.PI; 24 const eAdd = document.createElement('span'); 25 eAdd.innerHTML = '●'; 26 eAdd.classList.add("my-design", "script-add"); 27 style = `font-size: ${elemCenterSize / sizeDiv}px; `; 28 style += `left:${elemCenterSize + posX}px; top:${elemCenterSize + posY}px;`; 29 eAdd.style = style; 30 if (times-- == 0) { 31 clearInterval(progressTimer); 32 document.querySelectorAll('.script-add').forEach(elem => elem.remove()); 33 } 34 document.getElementById('base').append(eAdd); 35} 36</script> 37</head> 38 39<body> 40<div id="base" style="margin: 100px;"> 41<span id="circleprogress" class="my-design"></span> 42</div> 43</body>

投稿2021/03/27 04:32

FromMZ1500

総合スコア496

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問