@nimfai
Full stack developer

Как работает анимация в хедере на сайте JetBrains?

Здравствуйте!
Есть желание научиться делать нечто похожее на это (Посмотреть как работает можно здесь):
5dcaa04fe8b91174833169.png
Куда копать? Возможно уже есть готовые решения/плагины где можно посмотреть как это работает?
Заранее спасибо!
  • Вопрос задан
  • 172 просмотра
Решения вопроса 2
@UnformedVoid
Разработчик ПО
Вроде такие штуки называются каплевидными объектами или метаболами (metaball). У них есть строгое математическое описание. В целом это самая сложная часть в этой задаче. А в остальном — это просто отрисовка на канвасе в пару-тройку слоёв. По ощущениям каждый «шарик» привязан к какой-то точке, от которой он не может отойти больше чем на отведённое ему расстояние. Ну и вдобавок к этому, он «убегает» от курсора. Вот и весь эффект.

Вот почитать и пример реализации:
https://ru.wikipedia.org/wiki/Metaball
paperjs.org/examples/meta-balls
Ответ написан
@katsi
https://codepen.io/team/Atcom/pen/dWwGKa - вот аналогичный пример, но чтобы разобраться придется попотеть
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@jamtuson
https://css-tricks.com/gooey-effect/
Может быть вот это поможет?
Ответ написан
Ваш ответ на вопрос

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

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