こちらのQiitaのサイトのようにある要素を回転させていく中で回転スピードを変更したいと思っています。
スピードの変更はできるのですが、変更が発生するたびに一旦回転角度がリセット(開始位置に戻る)されて回転動作がスムーズに見えなくなっています。
例えば、風車のように風の強弱で回転スピードが変わるように、速度値の上げ下げによって、そのときの角度を保ったまま速度を変えるにはゴリゴリにコードを書かなければ実装できないのでしょうか?
もし、そのような実装を経験された方がいましたらご教示していただけたらありがたいです。
-----訂正です。
一旦回転角度がリセット(開始位置に戻る)と思っていたのですが勘違いでした。
不特定の角度に進んだり戻ったりしているようです。
css
1 .squareBox { 2 position: absolute; 3 width: 100px; 4 height: 100px; 5 background-color: greenyellow; 6 margin-top: 50px; 7 margin-left: 50px; 8 animation-name: rotate; 9 animation-timing-function: linear; 10 animation-iteration-count: infinite; 11 animation-duration: 0s; 12 } 13 @keyframes rotate{ 14 0% { transform: rotate( 0deg); } 15 100% { transform: rotate(360deg); } 16 }
javascript
1 $(function () { 2 $("#speedNum").change(function () { // スピードの設定 3 $("#speedChange").text($("#speedNum").val()); 4 }); 5 6 $("#speedChange").click(function () { // スピード反映 7 var spnum = $("#speedNum").val(); 8 $(".squareBox").css('animation-duration', spnum + 's'); 9 $(".squareBox").text(spnum); 10 }); 11 });
html
1 <div class="squareBox">15</div> 2 <input type="range" name="speedNum" id="speedNum" max="30" min="0" step="1" value="15" /> 3 <button type="button" id="speedChange">speed</button>
結局、これを実現するにはjavascriptを書かなければできないと判りました。
回答2件
あなたの回答
tips
プレビュー