Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

Анимированный фон (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;
}

Готово!

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

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

можно применять к html, body, div, buton, и т.д.

.animated_bg2

.animated_bg3

Последнее изменениеПятница, 25 Июль 2014 15:58
  • Оцените материал
    (0 голосов)
  • Опубликовано в Web coding
  • Прочитано 8622 раз
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru

Оставить комментарий

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


Защитный код
Обновить

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

Я сам вдохновляюсь материалами, которые предлагаются вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, макетов и т.д.), и по возможности всегда сохраняется ссылка на источники, и сообщается  автор изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые здесь предоставлены, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то ему придется самостоятельно искать настоящего автора материала.