Анимированный фон (background) для сайта.

В сегодняшнем уроке- будем рассматривать как сделать анимированный фон (background) для сайта. Это простой JQuery скрипт, который циклично оживляет серию цветов фона сайта. Она работает на всех устройствах, настольных ПК, планшетах и даже мобильных устройствах.

Обязательные Javascripts

Эта анимация требует JQuery, Jquery UI, и сценарий animated_bg.js.

• JQuery
• JQuery UI
• animated_bg.js

Как его использовать

1. Подключаем скрипты

Включаем необходимые Javascripts на странице.

<script src="/images/NEWS/web/web_coding/25.07.2014/demo/js/jquery-1.11.0.min.js"></script>
<script src="/images/NEWS/web/web_coding/25.07.2014/demo/js/jquery-ui.min.js"></script> 
<script src="/images/NEWS/web/web_coding/25.07.2014/demo/js/animated_bg.js"></script>
<script>

Добавляем класс animated_bg

Затем добавляем класс animated_bg к любому элементу, где бы вы хотели видеть анимацию цвета фона. Его можно добавлять в HTML, Body, ссылкe, заголовок, элементы форм и т.д. Этот скрипт работает на любом элементе.

<div class="animated_bg2 box">
		<h2>.animated_bg2</h2>
	</div>
	<div class="animated_bg3 box">
		<h2>.animated_bg3</h2>
	</div>

Пользовательские анимации цвета

Вы можете добавить свои собственные цвета и скорость анимации. В коде ниже я добавил Animated_bg2 и Animated_bg3, чтобы показать различные цвета и скорость.

<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 брать изначальный цвет фона.

.animated_bg2 {
	background: #abebfe; 
	color: #000;
}
.animated_bg3 {
	background: #71a98b; 
	color: #fff;
}

Готово!

А это Дэмо элемент для примера