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

Нашел на днях на сайте одной из веб студий интересный эффект и хочу сделать нечто похожее, подскажите в какую сторону копать.
Вот еще один пример интересного эффекта - ссылка
  • Вопрос задан
  • 266 просмотров
Решения вопроса 2
Symphony
@Symphony Куратор тега CSS
1. SVG + JS
Можете поиграться (клик)

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

2016 год – можно смело брать и использовать обе технологии.
Ответ написан
Комментировать
Вторая ссылка - канвас, принцип - рисуем кучу кружочков, слушаем эвент mousemove, если расстояние от кружочка меньше Delta = задаём кружочку новое положение ( чтобы они как бы отталкивались).
Первая ссылка - огромная svgшка из треугольничков ( на самом деле можно взять один такой квадратик много раз его вывести, при mouseover эффекте треугольнику ставится fill, а благодаря transition он красиво мерцает.
Первый эффект мне нравится намного больше второго, т.к. не тащит за собой канвасину.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
HamSter007
@HamSter007
HTML/CSS верстальщик
По первому - svg на всю страницу, при :hover на path меняется заливка fill.

Второй с помощью canvas выполнен.
Ответ написан
Ni55aN
@Ni55aN
Сгенерировать SVG через JS, прицепить к нему событие mousemove и зависимо от позиции курсора создавать path с нужными стилями.

П.С. Смотрите исходный код, Chrome DevTools в помощь
Ответ написан
Комментировать
Видел подобное на сайте, когда заказывал рекламу для питерского отдела, https://sparkseo.ru/
ребята нам делали подобное, но наш сайт потом закрыли.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы