@megamage
Люблю грозу в начале мая!

Интересная задача на JS?

Добрый день!
Пришла интересная задача и уже сижу несколько часов над ее решением
тут
Вообщем черные блоки должны плавно двигаться вверх, и как дойдет до последнего, чтобы круг шел сначала.

5c70e552bb303555042921.png

Желательно делать как нибудь через свойство transform.
Задача вроде не такая уж и сложная, но я что-то туплю.) Помогите пожалуйста! Заранее спасибо!
  • Вопрос задан
  • 428 просмотров
Решения вопроса 1
RAX7
@RAX7
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега JavaScript
А зачем это задаче js? Решается парой css свойств.

Ответ написан
john36allTa
@john36allTa
That`s calling Walker
Криво и возможно затролят, но набросал на скорую руку. Едет плавно.
//Как такое сделать используя JS? Можно с jquery
var box = document.getElementsByClassName('container')[0];
setInterval(function(){
	let baloon = box.getElementsByClassName('baloon')[0];
  let top = parseInt(getComputedStyle(baloon).marginTop);
  top = top ? top : 0;
  baloon.style.marginTop = top-1+'px';
  if (box.getElementsByClassName('baloon')[1].offsetTop <= 0){
  	box.removeChild(baloon);
    baloon.style.marginTop = 10 + 'px';
    box.getElementsByClassName('baloon')[0].style.marginTop = 0 + 'px';
    box.appendChild(baloon);
  }  
}, 50)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы