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

Question

[Lord_Dantes]

Есть кружечки они "плывут" как бы в ряд в левую сторону, при наведении появляется обычная p-шка и там имя фамилия кружечка. Также при наведении от этого кружечка все от него чуть уходят в стороны, и поток не плывет пока на круг наводят. Подскажите хотя-бы куда копать или что это за библиотека может есть мб?

Answer 1

[gracer]

Для вдохновения
https://codepen.io/juliebacon/pen/wdqgOG
https://codepen.io/ishaiavrahami/pen/XwBOzQ

Т.к. поведение объектов похоже на игровые механики, движение, взаимодействие с другими объектам, реакция на действия пользователя, я бы копал в сторону реализации на canvas и requestAnimationFrame. Возможно, игровые движки какие подойдут.

Comments

[Lord_Dantes]

Первый линк огонь просто!

Answer 2

[profesor08]

Что-то близкое это https://vincentgarreau.com/particles.js/ там много чего можно сделать. Как минимум, чтоб плавали кружки с картинками и с ними можно было бы взаимодействовать. Прям тут в панели справа можно настраивать, но тебе все равно придется программировать немного.

Comments

[Lord_Dantes]

Можно сделать согласен но там же canvas используется, а мне нужно все это дело на ВП оформить и чтобы каждый круг = один пост был. Поэтому так-то

[profesor08]

slave, ну и что? Что ты сгенерируешь HTML, что сгенерируешь JSON и инициализируешь им партиклы. Разницы никакой.

[Lord_Dantes]

profesor08, мб согласен но не знаю как с ВП постов сгенерировать партиклы и вставить в "карусель". + больше работы, а проект срочный.