Элементы расположены по кругу, кол-во элементов опционально, они должны крутится во круг центра. Как сделать анимацию?

Ссылка скопирована
JavaScript
1 ответ

Привет знатокам.
Круг вращается вокруг своей оси на гранях которого расположены картинки.
На первый взгляд может показаться, что rotate поможет, но картинки в таком случае тоже вращаются, а не должны.
Может есть готовый плагин, желательно на js, но и jq подойдет

Много решений перепробовал, но подходящего не нашел под мои задачи пока что
upd:
Сообразил такой код, но не выходит выроянть во время анимации элементы, хотя если анимацию выключить то все +- ровно

https://codepen.io/jivoy_web/pen/VwNLBbW

Дополнительно:

но картинки в таком случае тоже вращаются, а не должны.

а если их вращать вокруг своих осей в другую сторону?

  • или вариант предложенный Alexandroppolus, или выносим их вне круга и меняем им координаты через sin и cos
  • Alexandroppolus, а как расчитать скорость и прочие параметры для этого) да и не думаю, что это верный вариант, скорее всего будет фризить и заметно будет что они дергаются, могу ошибаться. С js у меня не очень, может есть какойто пример

    • https://codesandbox.io/p/sandbox/rotated-ffjlsh

    набросок. Вроде бы синий квадрат синхронизируется с парентом и не меняет своего разворота. Скорость вращения та же

    • Спасибо за помощь, я чуть адаптировал под свой варинт, не знаете как подровнять элементы что бы они по центру круга все время были. Если анимацию остановить то они +- равно, но при воспроизведении анимации уходят в сторону.

      https://codepen.io/jivoy_web/pen/VwNLBbW

    • verstak2020, там надо правильно расставить чилды

      https://codesandbox.io/p/sandbox/rotated-ffjlsh

      здесь я обернул чилы во врапперы нулевого размера, так что враппер находится по центру чилда
      далее я в js расставляю врапперы, с учетом центра фигуры.
      и чилды начинают вращаться вокруг той точки, где находится враппер.

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Алексей Денисов Ответ

    Для создания анимации элементов, расположенных по кругу, можно воспользоваться CSS и JavaScript. Вот пример кода на PHP, который генерирует HTML и CSS для реализации такой анимации:

     
 
 
 
 
<title>Circle Animation</title>
 
  .circle {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    animation: spin 5s linear infinite;
  }
 
  @keyframes spin {
    0% {
      transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
  }
 
 
 
&lt;?php
$numElements = 8;
for ($i = 0; $i &lt; $numElements; $i++) {
  $angle = 360 / $numElements * $i;
  $elementStyle = &quot;transform: rotate($angle deg) translateX(200px) rotate(-$angle deg);&quot;;
  echo &quot;<div class='circle' style='$elementStyle'></div>";
}
?&gt;

    <title>Circle Animation</title> .circle { position: absolute; width: 50px; height: 50px; background-color: #3498db; border-radius: 50%; animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg) translateX(200px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(200px) rotate(-360deg); } } &lt;?php $numElements = 8; for ($i = 0; $i &lt; $numElements; $i++) { $angle = 360 / $numElements * $i; $elementStyle = &quot;transform: rotate($angle deg) translateX(200px) rotate(-$angle deg);&quot;; echo &quot;<div class='circle' style='$elementStyle'></div>"; } ?&gt;

    В этом примере мы создаем круговую анимацию, в которой элементы вращаются вокруг центра страницы. Мы используем CSS для стилизации и анимации элементов, а PHP для генерации HTML с уникальными углами поворота каждого элемента. Когда страница загружается, элементы будут вращаться вокруг центра страницы.

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 0 ответов