Как сделать чтобы кружочок крутился возле круга?

Question

[SheikhRamil]

Как сделать чтобы кружочок крутился возле круга и границу как в ссылке.Ко мне пока не приходит ответ, вот пример:
https://vanillawebprojects.com/projects//relaxer-app/
мой код:

Comments

[Danil Klimov]

В чем проблема посмотреть в коде как это сделано на том сайте что вы указали?

[SheikhRamil]

Danil Klimov, я практикусь, не хочу в код смотреть

[Danil Klimov]

Ramil_ Bayramov_, инструмены разработчика хрома очень полезная штука. А в вашем случае вообще все как на ладони. Там файлы не минифицированы.
.pointer-container - это тот кружочек что вам нужен

и собственно стили которые его описывают.

[Danil Klimov]

Но если делать анимацию увеличения/уменьшения самого блока, как в примере, нужно делать не так, а как на сайте примере. Нужно немного иначен всё сверстать.

[SheikhRamil]

Danil Klimov, спасибо

Answer 1

[ettaluni]

Вот пример:

function animation(args, elem) { // некоторые аргументы определим на будущее
	var $ = {
		radius  :     250, // радиус окружности 
		speed   :     20 // скорость/задержка ( в js это мс, например 10 мс = 100 кадров в секунду)
	}
	var f = 0;
	var s = 2 * Math.PI / 180; //Вычислим угол
	setInterval(function() { // функция движения 
		f += s; // приращение аргумента
		  elem.style.left =  235 + $.radius * Math.sin(f)  + 'px'; // меняем координаты элемента, подобно тому как мы это делали в школе в декартовой системе координат. Правда, в данном случае используется полярная система координат, изменяя угол
		  elem.style.top =   235 + $.radius * Math.cos(f) + 'px';
	}, $.speed)
}

Comments

[Danil Klimov]

Там всё делается посредством CSS анимациии в 2 строчки. Зачем такое городить?

[ettaluni]

Danil Klimov, Захотелось огорода.

[SheikhRamil]

Danil Klimov, можете показать?

[SheikhRamil]

ettaluni, вместо elem надо ставить circle?

[ettaluni]

Ramil_ Bayramov_, circle__absolute, но вернуть в форме Class Node переменой, которую ты сначала должен найти вроде через getElementByClassName, если в js была функция возвращающая одиночный элемент по классу.

[ettaluni]

Ramil_ Bayramov_, А так я уже погуглил, о чем говорил Danil Klimov, магазин лучше своего огорода так что я теперь тоже знаю.

-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
/*
 * Установите ключевые кадры, чтобы те в действительности описывали начальное и конечное состояния анимации. Браузер интерполирует все кадры между этими точками. И снова помните о префиксах!
 */
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

[Danil Klimov]

ettaluni, Да, в целом оно так и работает. Но тут нужно чуть по другому делать потому что сам основной круг тоже имеет анимацию пульсации (ставноится то больше, то меньше).

[SheikhRamil]

ettaluni, спасибо