Как можно с помощью js css, сделать линии на сайте, которые будут следовать за курсором?

Question

[Winter525]

Привет, как можно сделать такую анимацию, как на этом сайте?
Мне надо что бы после курсора мыши оставался точно такой же след, и расширялся точно так же как на этом вебсайте.
То есть точно такая же анимация нужна.
https://jacekjeznach.com/

Answer 1

[ⓒⓢⓢ]

на указанном сайте в отдельном js файле подключается функция "initOciliator" она и создаёт анимацию
https://codepen.io/jrkdv/full/qBYYPyw
изменил оригинальную функцию на 200 строке, добавил смену цвета

Comments

[Winter525]

А что мне вписать в html коде?
Я свой сайт не подключал к серверу еще, не со всем понимаю какую мне там ссылку указать.

[ⓒⓢⓢ]

Winter525, вам нужно:

• в html коде разместить canvas элемент
  
• этот canvas, с помощью css, разместить на всю страницу (например, как у меня в примере с помощью позиционирования)
  
• в свой js скопировать функцию из моей песочницы function initOciliator(remove) {...} и вызвать её initOciliator() в нужно вам месте
  
  

https://codepen.io/jrkdv/pen/qBYYPyw

[Winter525]

ⓒⓢⓢ, Сделал все как ты сказал, почему то не хочет работать. Возможно что то сделал не правильно, так как до этого не работал с js.
Скрины как у меня это все написано:
https://ibb.co/9886d5j
https://ibb.co/Z8tJXvy
https://ibb.co/F0PKQZq

[ⓒⓢⓢ]

Winter525, возможно

[Winter525]

ⓒⓢⓢ, Я не со всем понимаю где мне вызывать эту функцию. Я пытаюсь вызвать ее в конце кода js.

[ⓒⓢⓢ]

Winter525,
Попробуйте дождаться загрузки страницы и только потом вызывать функцию
например, за место
initOciliator();
напишите как-нибудь так:

document.addEventListener('DOMContentLoaded', function(){
  initOciliator();
});

[Winter525]

ⓒⓢⓢ, Спасибо большое, помогло