Как пустить элементы по кругу с помощью скролла?

Question

[privat13]

Добрый день. Коллеги. Совсем запарился, прошу направить мысль в нужном направлении. Или указать порядок действий.



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

Возможно есть готовая библиотека на vue или готовое решение на js? Может быть самописное решение на js?
Есть идеи как это сделать?)

Comments

[0xD34F]

Есть идеи как это сделать?

Есть.

[Виктор Л]

https://github.com/victorqribeiro/dial
Может наведёт на мысли

Answer 1

[Ivan Bogachev]

порядок действий

1. Сделать 12 элементов.
   
2. Расположить элементы по кругу. Тут абсолютное позиционирование В текущих реалиях вечнозеленых браузеров мы можем использовать нативные функции sin() и cos(), чтобы рассчитать, где какие из них должны быть расположены на окружности не покидая мир CSS. Тут никакой магии, геометрия за 7 класс школы.
   
3. Естественным образом в расчетах координат появится угол, который можно менять, тем самым поворачивая всю эту карусель. Его можно уже из скриптов менять по той логике, которая нужна для взаимодействия с пользователем.
   
4. Обрезать все штатным clip-path.
   

Это если говорить про HTML+CSS подход. Он легко делается, но он не идеальный внутри. Есть две проблемы, которые не решатся заменой свойств на другие. Первая - это дергающиеся элементы. В каких-то браузерах это будет проявляться меньше, в каких-то больше. Как ни крути положения элементов округляются до целого количества пикселей по неведомой для нас логике и в движении будут заметны сдвиги в 1px туда-сюда. И производительность - это вторая потенциальная проблема. Двигать много элементов одновременно, особенно если они большие - не всегда хорошо. Не факт, что это будет проблемой в вашем случае, но в теории может стать с учетом всего остального, что будет на странице. Более производительным в теории вариантом будет нарисовать все это на канвасе. Там же можно будет взять под контроль все округления. По крайней мере до какой-то степени. Это следующий шаг, куда можно все это развивать. Логика будет той же самой, но уже на других технологиях. Вероятно вам будет проще начать с варианта на CSS.

Comments

[Aetae]

Ну чтоб не дергались особо - проще положить их ровно по кругу, а крутить родителя.:)

[Ivan Bogachev]

Aetae,

Ну чтоб не дергались особо - проще положить их ровно по кругу, а крутить родителя.:)

Они и лежат ровно по кругу. Если посмотреть внимательно, то можно заметить, что дергаются здесь не кружки, а тексты. Это проблема связана с рендерингом шрифтов. Из CSS мы не имеем особых возможностей контролировать, как это все будет сглаживаться, и имеем вот такой своеобразный строб. Пока эти цифры существуют в виде реальных HTML-элементов - они будут дергаться. Вращение родителя здесь никак не повлияет на проблему, потому что она не в трансформациях как таковых. Если бы это все было единой растровой картинкой, то такого эффекта бы не было.

[privat13]

Ivan Bogachev, Иван, спасибо большое, взял в тестирование.

[privat13]

Буду разбираться как это на скролл мыши повести. Меню в виду само вращение на скролл повесить.

[privat13]

Ivan Bogachev, Пока что получилось вот так. Я не мастер и это далеко не изящно. Буду еще дорабатывать.

https://codepen.io/Privat13/pen/WNBpPrW