Анимация цвета фона

Анимация цвета фона

Анимация цвета фона используя библиотеку JQuery для автоматизации цветного цикла фона. Анимация проходит гладко на любом устройстве.

Мы используем: animated_bg.js, JQuery UI и JQuery.

Руководство по использованию

Подключить необходимые скрипты

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script> 
<script src="js/animated_bg.js"></script>

Подключить класс библиотеки .animated_bg

Далее, необходимо просто добавить анимируемому элементу класс скрипта animated_bg, после добавления, функция анимации активируется. Класс библиотеки animated_bg буквально работает с абсолютно любым элементом: фон, кнопки,  HTML и др.

<div class="animated_bg">
	content
</div>

Кастомизация анимации и установка скорости

В Демо-примерах, добавлены разные скорости и цвета, посмотрите на код ниже. Цвета неограничены, добавляйте сколько хотите.

<script>
	jQuery(document).ready(function(){

		$('.animated_bg2').animatedBG({
			colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],
			speed: 2000
		});

		$('.animated_bg3').animatedBG({
			colorSet: ['#71a98b', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'],
			speed: 6000
		});

	});
</script>

Добавление Запасного CSS

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

/* установить bg color на первый цвет, определенный в функциях анимации */
.animated_bg2 {
	background: #abebfe; 
	color: #000;
}
.animated_bg3 {
	background: #71a98b; 
	color: #fff;
}
Aliexpress INTAliexpress INTAliexpress INT

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *