Солнечные лучи на JS

Эффект основан на WebGL и работает на библиотеке KGL

Пример:

Обратите внимание: тестируя скрипт локально эффект может не работать.

HTML:

JS:

Подключаем библиотеку KGL и скрипт самого эффекта sunrays.js

По умолчанию библиотека KGL вставляет полноэкранный canvas в конец тега body. Такое решение, на мой взгляд, вряд ли где-то применимо, поэтому я изменил его и вставил в блок с id="webgl" (строка 553 в библиотеке).

Картинка для фона задается в sunrays.js (строка 54)


За основу взят скрипт, найденный на codepen.io у пользователя Ko.Yelie
Библиотека KGL на github

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Владимир:

    День добрый. Подскажите пожалуйста, а как блоком по ширине высоте управлять? Стили не совсем то, я так понимаю <canvas style="display: block; width: 100%; height: 100%;" width="1250" height="625"></canvas>

    Такое назначается скриптом, раньше получалось такие вещи спустя часик найти, тут никак.

    Ответить
    • Alexander:

      А если задать блоку webgl нужные размеры?

      Ответить