Как сделать такую функциональность?

Question

[an]

Может кто то видел пример на каком то codepen
Как такое сделать?

Comments

[Дмитрий Беляев]

Ну тут же видео просто, а вообще можно на svg анимации или на css анимации, js тут избыточен.

[an]

Дмитрий Беляев, на css то анимации делал
но тут вся фишка, что по клику на персонажа, он отезжает в центр, а остальные раступаются в боки

[Сергей Соколов]

Вроде бы все двигаются по прямой, перекрывают друг друга во время движения.
Наверное просто линейный переход между состояниями: "никто не выбран", "выбран А", выбран Б, ... выбран Ы.
Может, просто заморочились вручную расставить все эти N+1 состояние, а переходы тупо стилями.

[Сергей Соколов]

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

[Дмитрий Беляев]

an, клики потенциально можно отслеживать через скрытые radio + селектор :checked

Answer 1

[RAX7]

Answer 2

[Вадим Лебеденко]

Ну, тут довольно много JS кода. (шучу).

Всё, как мне кажется, можно организовать простым CSS. Для этого там есть ".elem:hover{tranform: translate(x, y)}".
Просто задаешь сначала позиции при загрузке, потом, когда на кружок наводятся - меняешь размер и позицию.

Comments

[an]

Спасибо
но там на клик нужно
это для мобилок делать нужно

[Вадим Лебеденко]

an, На клик тоже можно сделать событие. Но через JS.

elem.addEventListener('click', function(){
     elem.style.tranform = "translate(x, y)"
})

Остальной функционал, по типу возвращения блока обратно, делается почти так же.

P.S. На мобилке события не отличаются от компьютерных.

это для мобилок делать нужно

- там только размер экрана отличается, и некоторые события добавляются. Но в данном случае они не нужны.

[an]

Вадим Лебеденко, А Вы не встречали таких примеров?
просто даже не знаю по какому запросу искать что то подобное

[Вадим Лебеденко]

an, таких примеров не встречал, в принципе даже не занимался почти таким. Но если нужно - могу помочь.