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

Question

[Yaroslav]

Привет,
подскажите пожалуйста, как сделать подобную анимацию:
https://oceanprotocol.com/

Comments

[Therapyx]

эта хрень мне i7 7700k OC 4.8 на 20% цпу грузила. Я бы трижды задумался о таких еффектах на своих сайтах.

Answer 1

[ElijahTr]

threejs.live/#/canvas_particles_waves

Answer 2

[JackShcherbakov]

Вам нужен ThreeJs для создания 3d графики подобного рода.

Но как по мне проще просто видео на фон поставить да и все.

Answer 3

[Basitkhan Mansurov]

Это конечно красиво, но вы так разнесёте к чертям собачим чей-то браузер, легче всего использовать видеофон, хоть тут движение и асинхронное, всё равно лаги конкретные будут, если это только не для себя

i5 7700 16gb и у меня выше 40fps не поднимался...

Comments

[Yaroslav]

Так же важный момент, действительно протестировал на более слабом ноутбуке, при том же соединении интернета, мягко говоря "сильно тормозит". У меня в приоритете производительность сайта. Спасибо.

[Dima Polos]

Yaroslav, у меня вообще 3 фпс, ну это я так на глаз посчитал)) тяжелая штука.

[Basitkhan Mansurov]

Yaroslav, скорость интернет соеденения ничего больше не дает, как просто увеличение загрузки скрипта, а вот уже просчет ложиться на плечи процессора)

Answer 4

[Dima Polos]

Вот, вчера буквально смотрел, как такое сделать, есть два видео, если время не пожалеете, то думаю найдете свой способ:
Первое, и в этом же плейлисте посмотрите видео под номером 5, там как раз ближе по теме, к тому, что Вы спросили. Хотя, сами ответы дали выше, но видео нагляднее, как по мне.