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

Question

[Andrew E]

На сайте https://advanced.team/ реилзовали интересную анимацию курсора. Нашел что-то подобное https://paveldogreat.github.io/WebGL-Fluid-Simulation/, даже получилось сделать фоном для одной секции. Но анимация под текстом не работает, как на сайте из примера и не могу сообразить как сделать это на всем сайте.

Помогите друзья, может есть идеи или кто-то уже подобное делал? Такое ощущение, что тут игра индексами, но какая ума не приложу... Потому что есть что-то подобное тут https://baseone.uk/, также анимация под текстом.

Второй день бьюсь уже и все без толку. А сайт из примера сделан на фреймворке, там сам черт ногу в коде сломит.

Вот тут набросал что получилось сделать

https://codepen.io/efremandre/pen/wvYpgJJ

Answer 1

[Вадим]

Можно конечно отключать poiner-events, но если включать его для текста, то это всё равно приведёт к той же проблеме. Что под текстом не будет работать.

Поковырял немного:


Основное что изменил - отслеживание событий mousemove не на канвасе, а на всей секции и e.offsetX на e.clientX

Comments

[Andrew E]

Это выглядит как то, что нужно. Спасибо!

Answer 2

[Александр Талалаев]

У вас другие слои перехватывают события poiner-events, поэтому конвас как бы не видит их.
Для этого, например, можно для main__section отключить : pointer-events: none;, а потом для нужных элементов включать, в данном случае для canvasFluid: pointer-events: all;

PS и помним что такой эффект крайне ресурсоемкий, советую протестировать на "слабых" устройствах, на многих будет МНОГО меньше 60 fps, да даже меньше 10.

Comments

[Stalker_RED]

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

[TtT RrR]

+++ у меня 10 летнее устройство, пыхтит хуже паровоза и кадры низкие

[Andrew E]

TtT RrR, спасибо большое за фидбек, надо подумать как отключать вовсе эту свистелку, если устройство слабое

[Andrew E]

Тоже способ рабочий, спасибо большое