@privat13

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

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

66596f76ae885154617546.png

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

Возможно есть готовая библиотека на vue или готовое решение на js? Может быть самописное решение на js?
Есть идеи как это сделать?)
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
порядок действий

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




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

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

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