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

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

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

次のスライドを表示する。
そのボタンのアニメを次のボタンに渡す。
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ボタンのイラストをこのイラストに変更したいです。

Lhankor_Mhy

2021/03/27 00:33

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

hatena19

2021/03/27 01:55 編集

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

行動規範の内容に同意します

回答1件

ベストアンサー

'●'の要素を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>