Линия от элемента следует за курсором. Как сделать?

Question

[Alixx]

Здравствуйте!
Можно ли на странице сделать линию, чтобы эта линия шла от определённой точки (например, кликнул по элементу определённому, а линия исходит тогда из центра этого элемента), а другой её конец следовал за курсором?
А линия, чтобы какой-нибудь стиль имела - градиент, тень или ещё что, лучше, конечно, чтобы линия была с анимацией (например, вместо чёрной простой линии какие-нибудь точки "бегали" вдоль линии, или ещё как-то)?

Comments

[WapSter]

Можно

[Alixx]

WapSter, а как же? Подскажите

[WapSter]

Alixx, Ловишь событие клика, ловишь координаты начала и начинаешь на css рисовать относительно позиционированный блок, в этом же событии создаёшь слушателя движения мыши, вот тебе вторые координаты продолжаешь по ним блок. Если ты понял, что я написал пишешь скрипт. Иначе на фриланс.

[Rustam Bainazarov]

Alixx, в поисковике: JS cursor trail.

[Alixx]

WapSter, хех, спасибо за ответ) вообще я так и предполагала (правда, позиция непонятно почему относительная, а не абсолютная), только как продолжить блок-то? Собственно, это и поставило в тупик) Начальные координаты ставятся в top и leftt соответственно, а вторыми координатами как оперировать?

[Alixx]

Рустам Байназаров, так вот как это называется, спасибо) Правда, там линии не привязаны к начальной точке, но пригодится)

[WapSter]

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

[Alixx]

WapSter, Во-во, геморройно через эти углы высчитывать, да и анимацию не знаю как наложить на такой блок. А вот то, что по "JS cursor trail" выдало, то больше подходит, надо только блоки к начальной точке привязать. Это уже попроще)

Answer 1

[RAX7]

Делаешь канвас поверх всей страницы, считаешь координаты нужного элемента и рисуешь линию на этом канвасе до координат курсора.

Comments

[Alixx]

Спасибо огромное за такой вариант!!! (я и не знала, что канвас может работать поверх всех элементов)

[RAX7]

Alixx, пожалуйста =)