Что за анимация текста используется на сайте capitolcouture.pn?

Question

[Александр Вишняков]

Есть такой сайт: Capitol Couture (capitolcouture.pn). Это фан-сайт о моде во франшизе "Голодные игры". На главной странице использована очень интересная анимация, которая появляется при наведении курсора на название дизайнерского решения (Ignis Glace, в данный момент; другие подобные анимации можно посмотреть нажав Issue Two или Issue One). Кто-нибудь может расковырять выдаваемые html/css/js и сказать каким образом они это делают? Понятно что это Canvas, но как конкретно?! Я думаю не только мне будет интересно узнать про этот эффект.

Answer 1

[Webdesus]

Ну там все просто оказалось к счастью для Вас. Они написали свой фреймворк для отрисовки данных вещей. В сети не нашел где его можно скачать, по этому берем прям с сайта. Копируем все файлы из папки http://static.capitolcouture.pn/theatrical/v16/. Там в принципе все и так понятно однако если будет сложно. Уж не знаю для кого они это сделали но там есть маленький пример использования этого фреймворка. Вот тут находится пример использования ихнего фреймоврка. Он находится как мы видим в той же папке что я говорил нужно скачать.

Comments

[Александр Вишняков]

А ребята быстро реагируют. 28 минут - и уже Forbidden =)

[Александр Вишняков]

@Webdesus Есть обходные пути? Копировать я конечно не стану, но поковыряться в исходниках очень хотелось бы.

[direct_inject]

если кто-то успел скачать, выложили бы по тихому :)

[Александр Вишняков]

@direct_inject воровать - не есть хорошо =) но сам эффект интересней. тот, кто первый изучит его и напишет о нём на хабре - отгребёт кучу положительной кармы.

[Александр Вишняков]

интересный*, конечно же.

[direct_inject]

@asvishnyakov исследовательский интерес :D

[Александр Вишняков]

@direct_inject сделать так же и своровать - разные вещи =)

[Александр Вишняков]

@direct_inject Проходим по ссылке, где пример, в Chrome -> клик правой кнопкой -> Save as... -> Web Page, Complete. Всё сохраняется, но вот работать не хочет =)

[Александр Вишняков]

Проблема решилась предельно просто с помощью wget'а :)

Answer 2

[Par Mactep]

на canvas рисуют с помощью WebGl

Comments

[Александр Вишняков]

Ну понятное дело что не div'ами они это делают. Меня интересуют фреймворки, алгоритмы или что там используется...