Как сделать такой эффект при движении курсора?

Question

[Gerich4444]

Добрый день, как можно сделать такой эффект, как на этом сайте https://www.luchohler.com/ ? Не сочтите ссылку за рекламу, сайт нашел в веб эвордс.

Можно ли это реализовать просто прикрутив какой-то js?

Answer 1

[Anonymous Penguin]

JavaScript Fluid Simulation/Animation
https://www.youtube.com/watch?v=5Q4vmjVxdrk

Comments

[Gerich4444]

Спасибо, попробую

[Gerich4444]

Сделал все 1 в 1 как в видео, но не сработало. В чем может быть причина? Проверьте, пожалуйста, по этой ссылке https://gethighagency.com/ в чем проблема

[Anonymous Penguin]

Gerich4444, нет такого сайта, не грузится. И подозрительно, что выделен целый домен для всего лишь примера кода. Загрузи на Codepen или JSFiddle и отправь

[Gerich4444]

Anonymous Penguin, ничего подозрительного, домен рабочий. Вот загрузил https://codepen.io/ovrgm/pen/RwQgGVY

[Anonymous Penguin]

Gerich4444, JS чувствителен к регистру. Let так же нужно писать с маленькой буквы

[Gerich4444]

Anonymous Penguin, спасибо! А можно ли сделать так, чтоб скрипт работал и без клика, просто при движении мыши?

[Anonymous Penguin]

Gerich4444, хм, ну с этой библиотекой я не работал, но думаю можно так сделать:

canvas.onmousemove = function (evt) {
  canvas.dispatchEvent(new MouseEvent('mousedown', evt));
  canvas.dispatchEvent(new MouseEvent('mousemove', evt));
}

[Gerich4444]

Anonymous Penguin, вставил это в app.js, не сработало. Или не туда надо?

const canvas = document.getElementById('renderSurface');
let myFluid = new Fluid(canvas);
canvas.onmousemove = function (evt) {
  canvas.dispatchEvent(new MouseEvent('mousedown', evt));
  canvas.dispatchEvent(new MouseEvent('mousemove', evt));
}
myFluid.activate();

[Gerich4444]

Хотя вроде все ок, спасибо!