16
Янв
2021

Включение нескольких элементов одновременно

Есть два элемента в виде диска когда я нажимаю на кнопку включение вращается только один диск. А как сделать так что бы при нажатии на кнопку включалось оба диска один вращался в лево другой в право

var sound = document.getElementById('sound');
var img = document.getElementById('rotateImg');
var img = document.getElementById('rotateImg2');
 
function rotate(action) {
  img.style.animationPlayState = action;
  if (action =='running') { sound.play()
  } else { sound.stop() }
}
#rotateImg {
  animation: 1s myRotate infinite linear paused;
}
#rotateImg2 {
  animation: 1s myRotate infinite linear paused;
} 
 
@keyframes myRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.circle{

border-radius: 100%;

background: red;

width: 100px;

height: 100px;
}
<div class="wrapper">
  <img class="circle"  id="rotateImg">
  <img class="circle" id="rotateImg2"> 
</>
<audio id="sound" src="http://www.html5tutorial.info/media/vincent.ogg"></audio>
<button onclick="rotate('running');">Крутить пластинку</button>
<button onclick="rotate('paused');">Остановить</button>

Источник: https://ru.stackoverflow.com/questions/1232185/%D0%92%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%B8%D1%85-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D0%BE%D0%B4%D0%BD%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%BE

Тебе может это понравится...

Добавить комментарий