Как сделать анимированый градиент?

Question

[Жека Добрик]

www.f-i.com/sony/connected-world

На первом экране страницы нас встретит шикарный переливающийся градиент - помогите повторить такой эффект. Скопировав скрипт, css и кусочек html ничего не получилось.

Answer 1

[Алексей]

Сделано на canvas.
Описание где то в районе 2000 строке, в файле script.min.js
За кодом советую обратится на http://freelansim.ru
А вообще оно вам правда надо? У меня браузер подвис пока открывал.

Comments

[Жека Добрик]

Спасибо! Да, я согласен с вами, тормозит. Разобраться хочу больше для себя, чем для продакшена, ну и зацепило как раз то, что способом тупого копирования ничего не вышло :)

Answer 2

[Владислав Гриценко]

Более чем уверен, что юзали WebGL. Также это можно реализовать через Three.js , с помощью частиц с разным цветом освещения, т.е. это просто несколько источников освещения с различной траекторией.

Comments

[Жека Добрик]

Вы правы, если присмотреться, то это не просто градиент, там действительно за курсором летают источники света

Answer 3

[Юрий Лобанов]

Не работает у меня в ff, сначала не понял где там динамика :) В хроме все ок, красиво.
А вот карта может мне пригодиться, на третьем слайде ) Спасибо.

Comments

[Жека Добрик]

У этих ребят много интересного можно найти