Как повторить такую анимацию?

Question

[myrcka]

Всем привет, ломаю голову, как повторить такую же эффектную анимацию как на этом сайте: https://www.setaprint.ch/en/
Эта "текучка" меняет цвет и похожа на заблюренный дым, она движется и меняет цвет автоматически, особенно при движении курсора. Я не программист, просто увидела сайт и захотела повторить, я не разбираюсь, чем отличаются css, java и html друг от друга, но с удовольствием разберусь в этом при помощи неравнодушных и шарящих в этой теме) Честно, не знаю даже, как с помощью "посмотреть код" в гугле можно понять, что за что отвечает. Может кто-то знает видео-уроки или статьи, которые смогут мне помочь. Планирую сделать все на тильде.

Comments

[Ankhena]

https://codepen.io/derwinsadiwa/pen/xxPdzpZ
https://codepen.io/digelim/pen/ZEMwggj
Как можно сделать такой живой дым на сайте css и js?
https://danni-three.blogspot.com/2013/09/threejs-p...
https://imapo.ru/эффект-дыма-на-фоне-при-помощи-sv...
https://code.tutsplus.com/how-to-write-a-smoke-sha...
думаю, достаточно, чтобы понять куда гуглить дальше

Answer 1

[Ivan Bogachev]

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

Если хочется просто взять готовые решения, сказать разработчикам, что использовать, и дать им набор параметров, то есть WebGL Fluid Simulation. Этот инструмент остается популярным выбором для этой задачи уже много лет.

Comments

[myrcka]

Иван, я безмерно вам благодарна! Сама я бы вряд ли когда-то нашла эту статью. Радуюсь, как ребенок)