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

Question

[Sli_M]

Доброго времени суток!

1. Подскажите пожалуйста, что нужно подправить или дописать в файле script.js (akis-style.dp.ua/new1/js/script.js), что бы анимация работала под объектами (текстами, изображениями). Сейчас под объектами анимация просто перестает работать.
2. И что что нужно подправить или дописать в файле script.js, что бы анимация canvas работала в бургер меню.

Заранее большое спасибо!

akis-style.dp.ua/new1

Answer 1

[profesor08]

Добавить к объектам стиль pointer-events: none;

Либо слушай на события не canvas, а window.

Comments

[Sli_M]

Тогда объекты с линками перестают быть кликабельными. Нужно другое решение(

[profesor08]

Sli_M, я тебе два решения предложил. Не хочешь первое, используй второе.

[Sli_M]

Второе не понял. Можно пожалуйста детальнее.

[Sli_M]

C window. Анимация заработала, но все равно работает криво:
akis-style.dp.ua/new2

[ProjectSoft]

offsetY меньше pageY

Это направление. Координаты относительно страницы. А канва у вас как раз на всю страницу.

[Sli_M]

ProjectSoft, Все равно не пойму, что нужно подправить :(

[ProjectSoft]

Sli_M, у вас просчёт, если canvas - то от положения над этим элементом, но его перекрывают другие элементы. соответственно событие теряется, не поднимается. Поэтому вешать надо на document. Но тогда offsetY будет равен офсету именно элементу, который вызвал событие поднял на document. Правильней было бы брать позицию курсора относительно страницы. Т. е. pageY.
Данные свойства доступны в переменной события, возникающие в функциях обработчиках. Например
canvas.addEventListener('mousemove', e => {})
Где e - и есть передаваемое событие в функцию. И т. д. по коду.

[Sli_M]

ProjectSoft, Спасибо огромное!
Все заработало. Но возникла следующая проблема. При прокрутке страницы анимация сползает:
akis-style.dp.ua/new3

[ProjectSoft]

Sli_M, так как canvas вы удерживаете в фиксированном положении, то стоит подумать о просчёте разницы pageY offsetY и позицией самого canvas относительно самого документа.
При fixed элемент прилипает к краям браузера, а не родительского документа.

[Sli_M]

ProjectSoft, Большая просьба, можете пожалуйста более конкретно написать, что нужно прописать в script.js?

[profesor08]

Sli_M, внимательно посмотреть что происходит на странице и вычесть и координат высоту прокрутки.

[Sli_M]

profesor08, Мне конечно стыдно, но все равно не понимаю, что нужно дописать(

[profesor08]

Sli_M, значит смирись

[Sli_M]

profesor08, Вы добрый :)