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

Пример:

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

HTML:

JS:

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

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

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

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

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.
Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

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

Следующая за курсором клякса

JavaSript и SVG фильтр для создания анимированной кляксы, которая следует за курсором

Электрический паук на JS

Электрический паук следующий за курсором мыши

Появляющиеся неоновые полигоны

JavaScript, создающий фоновый эффект с появляющимися неоновыми полигонами

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

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

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

  • Владимир:

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

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

    Ответить
    • Alexander:

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

      Ответить
Разделы: