Анимация для фона при движении мыши на JS | RUDEBOXЕсли вы хотите украсить фон сайта при этом чтобы он приобрел немного динамики но вы не знаете как это реализовать тогда данный урок будет вам весьма интересен, дело в том, что в сегодняшнем уроке мы рассмотрим как реализовать замечательный эффект анимированного фона выполнен исключительно на JavaScrip. По загрузке страницы анимация начинает движение в виде небольших цветных окружностей при этом дойдя до середины страницы анимация приостанавливается, это реализовано, чтобы показать траекторию и сам процесс.

Если вы будете водить мышкой, то анимация будет продолжать следовать за курсором при этом появляться окружности будут в рондомном порядке. И так, давайте приступим к реализации.

Шаг 1. HTML

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

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

Анимация для фона при движении мыши на JS RUDEBOX

Шаг 2. JS

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

JavaScript легко отредактировать придав ему собственные параметры, и цветовое соотношение. На этом данный урок завершен.

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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