Каким образом можно сделать подобные эффекты?

Question

[Руслан Шадура]

Нашел на днях на сайте одной из веб студий интересный эффект и хочу сделать нечто похожее, подскажите в какую сторону копать.
Вот еще один пример интересного эффекта - ссылка

Comments

[OVK2015]

Для первой ссылки www.aaccent.ru/templates/template1/scripts/ui.js:157

Answer 1

[A K]

1. SVG + JS
Можете поиграться (клик)

2. Canvas + requestAnimationFrame
Туториал для быстрого освоения

2016 год – можно смело брать и использовать обе технологии.

Answer 2

[Николай]

Вторая ссылка - канвас, принцип - рисуем кучу кружочков, слушаем эвент mousemove, если расстояние от кружочка меньше Delta = задаём кружочку новое положение ( чтобы они как бы отталкивались).
Первая ссылка - огромная svgшка из треугольничков ( на самом деле можно взять один такой квадратик много раз его вывести, при mouseover эффекте треугольнику ставится fill, а благодаря transition он красиво мерцает.
Первый эффект мне нравится намного больше второго, т.к. не тащит за собой канвасину.

Comments

[Руслан Шадура]

а что канванс на столько не любим браузерами?

[Николай]

Руслан Шадура: да нет, канвас вещь хорошая, но довольно тяжеловесная. Я не считаю, что стоит делать визуальные фигульки на канвасе, если сайт не исключительно промошный.

Answer 3

[HamSter]

По первому - svg на всю страницу, при :hover на path меняется заливка fill.

Второй с помощью canvas выполнен.

Comments

[Руслан Шадура]

это я в консоле тоже увидел. я имею в виду возможно есть какие-нибудь плагины для подобных эффектов?

[Vitaliy]

заливка не меняется, изначально ничего не заливается

Answer 4

[Vitaliy]

Сгенерировать SVG через JS, прицепить к нему событие mousemove и зависимо от позиции курсора создавать path с нужными стилями.

П.С. Смотрите исходный код, Chrome DevTools в помощь

Answer 5

[Даниил Сычев]

Видел подобное на сайте, когда заказывал рекламу для питерского отдела, https://sparkseo.ru/
ребята нам делали подобное, но наш сайт потом закрыли.