Необычный hover эффект?

Question

[rocket777]

Добрый день! Подскажите, может кто сталкивайся со следующей задачей или сможет помочь с вариантами её решения. Есть блок, который состоит из серых кружков, при наведении на любой из кружков он красится в яркий красный цвет, а соседние кружки - в более светлый. Таким образом, будет создаваться эффект шлейфа, как на картинке.

Answer 1

[Сергей Соколов]

Событие mousemove или onEnterFrame(),
пересчитать прозрачность каждой точки, как квадрат расстояния от позиции мыши.

Сделал пример на canvas.
upd. добавил инертности/плавности перехода цветов.

Comments

[rocket777]

Пример здоровский! У вас в примере меняется прозрачность каждого кружка, с самого начала кружки(без наведения с большей прозрачностью), потом при наведение прозрачность уменьшается. Но как быть, если изначально кружки должны быть серыми, а при наведении использовать красный свет с различной прозрачностью?

[Сергей Соколов]

rocket777: поведение каждого кружка описано в функции Point.prototype.render() У точки есть один параметр v от 0 до 1 – «текущее» значение. От него считается прозрачность. Как вы хотите, чтобы был переход от красного к серому? Резко - вряд ли.. Есть ли видео или живой пример ваших красных точек?

[Сергей Соколов]

rocket777, обновил под бело-красные цвета. И добавил инертность – шар следует за мышкой со сглаживанием.

Answer 2

[Максим Тимофеев]

Вот Вам пример в тему:
https://codepen.io/carolineartz/pen/vELaeE

Answer 3

[one_day]

Вот такой велосипед)
https://codepen.io/one_day/pen/dzwgoj

Answer 4

[Андрей Федоров]

Вам нужен реально ШЛЕЙФ или достаточно просто области под курсором? Если второе - https://codepen.io/aliencash/pen/PqMKVq только текстуры под себя перерисуйте.

Answer 5

[cssfish]

по-моему вам просто нужен hover + transition (bgcolor)
upd: хотя если еще и соседние надо красить - то тогда не...