Красивый анимированный фон для сайта на JSФон является неотъемлемой частью любого сайта, красивое оформление позволяет задать тон всему ресурсу. Здесь, перед веб-мастером, стоит не простая задача, ведь необходимо подобрать правильно цвета, чтобы пользователь не терялся на сайте и информация была хорошо видна. В данном уроке мы рассмотрим пример создания замечательного анимированного фона, который будет жить своей жизнь и менять цветовую палитру, смотрится весьма удивительно, и позволяет привлечь внимание посетителей.

 

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

Красивый анимированный фон для сайта на JS

У нас будет создаваться ощущение движение полигональных моделей при этом создавая небольшой эффект объемности. И так, давайте рассмотрим.

Шаг 1. JS

Разметка и стили достаточно примитивны, по этому мы их опустили, всю работу у нас будет выполнять js, нам необходимо создать рандомное отображение блоков, и случайный цвет при обновлении старницы, function randomize()  будет отвечать за рандомное отображение, points[polygon.point1].y будет отвечать за позицию в пространстве панелей, устанавливаем значение для осей х и y:

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

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

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