Как сделать анимацию окружности-крутилки?

Question

[AhAnya]

Подскажите, пожалуйста, какой можно использовать плагин, чтоб сделать анимацию окружности. Например, человек наводит курсор на точку и может ее перемещать на 360 градусов только вдоль границ этой окружности.

P.s. Прошу прощения за сумбурное описание, тяжело на словах объяснить.

Answer 1

[Николай Колесниченко]

Вам скорее всего нужен Range Slider, только круглый. Вот пара примеров:
roundsliderui.com/demos.html
www.toolitup.com/circular-slider.html

Гуглиться подобное примерно так:
circular range slider

Comments

[AhAnya]

Спасибо огромное вам! Буду знать теперь как гуглить правильно подобный запрос ))

Answer 2

[Nikolay Talanov]

Под ваше описание подходит второй пример из этого гсап плагина - https://greensock.com/draggable
Если я конечно правильно понял что вам необходимо.

Comments

[AhAnya]

да, совершенно верно. Именно это я и пыталась описать )) Спасибо :-)

[Nikolay Talanov]

AhAnya: Конкретно само вращение примитивно. Вы например создаете контейнер, в центр кладете див-ротейтер, который будет содержать элемент для вращения Элементу задаете допустим translateY(-100px) чтобы он был вверху по центру, и затем просто меняете transform: rotate() у элемента-ротейтера. Вся сложность заключается в грамотном обработчике вращения мышью. Если вам кажется что это просто, то на самом деле нет. Тут вам как раз поможет этот плагин (хотя сам я его не юзал).