Мы продолжаем развивать и внедрять идею красивых фонов для сайтов и в сегодняшнем уроке мы рассмотрим замечательный пример реализации абстрактного фона при помощи webGL. Идея состоит в построении сетки из многогранников, которые будут двигаться в бесконечном цикле, при этом постепенно изменяя угол, вращение, цветовую палитру, что будет создавать эффект метаморфозов, кроме этого сам по себе фон интерактивный и реагирует на передвижение курсора, что делает его оживленным и не скучным. На такой фон наверняка обратят внимание Ваши посетители.

Такой эффект реализован  с помощью JS, по этому не требует дополнительных изображений, также мы используем библиотеку three.min.js, и всё это работает при помощи развивающейся и быстро набирающей обороты технологии в веб-дизайне, а именно WebGLRenderer . Давайте приступим.

Шаг 1. HTML

Отображение нашей анимации будет реализована с помощью одного id, по этому код html у нас очень простой:

Также мы подключали скрипт three.min.js. в документе index, более детально Вы можете его просмотреть в исходниках к данному уроку.

Шаг 2. JS

Для начала мы определили общие правила которые нужны нам для фона, затем мы устанавливаем значения для треугольников и их рандомное отображение в середине общих контейнеров:

Теперь нам необходимо определить значения для общих контейнеров, а также их рандомное появление и движение на странице:

Затем предаем цветовую палитру для многогранников, что оживит визуально наш фон, вы можете установить свою цветовую гамму:

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

Вот и все. Готово!

Читайте также: