Эффект адаптивного меняющегося фона · jQuery

Эффект адаптивного меняющегося фона

Картинки или фото фона сайта будут плавно меняться, адаптивный эффект без дополнительных плагинов, используется только фреймворк jQuery, сделано описание по установке и демо примеры.

Подключение и настройка адаптивного меняющегося фона

Для подключения эффекта адаптивного фона с меняющимися изображениями у Вас должна быть подключена библиотека jQuery.

Подключение стилей CSS меняющегося фона

Стили CSS можно добавить в основной файл стилей или использовать отдельно.

#block--effect{
position:fixed;;
z-index:-1;
top:0;
left:0;
}
#block--effect img.img--effect{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
z-index:-1
}

Подключение скрипта jQuery меняющегося фона

Скрипт jQuery рекомендуется подключать ниже HTML кода адаптивного эффекта.

<script>
$(window).load(function(){
$('img.img--effect').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#block--effect').css({'height':dg_H,'width':dg_W});
function anim() {
$("#block--effect img.img--effect").first().appendTo('#block--effect').fadeOut(1500);
$("#block--effect img").first().fadeIn(1500);
setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})
</script>

Подключение кода с изображениями меняющегося фона

Код эффекта с изображениями может быть помещён в любое место тела <body>.

<div id="block--effect">
<img class="img--effect" src="http://drawings-girls.ucoz.net/2015/08/lico-devushki-na-fone-zakata.jpg" alt="Демо адаптивного фона 1" />
<img class="img--effect" src="http://drawings-girls.ucoz.net/2015/08/smuglaya-devushka-v-zelonom-platie.jpg" alt="Демо адаптивного фона 2" />
<img class="img--effect" src="http://drawings-girls.ucoz.net/2015/08/krasivaya-devushka-v-tancevalnom-naryade.jpg" alt="Демо адаптивного фона 3" />
<img class="img--effect" src="http://drawings-girls.ucoz.net/2015/08/krasivaya-devushka-pered-sosudom.jpg" alt="Демо адаптивного фона 4" />
</div>

Демо эффекта адаптивного меняющегося фона

Демо одного эффекта фона

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо эффекта фона для bootstrap

Для демонстрации демо эффекта нажмите кнопку </>.


Рейтинг: 5.0/5 из 4



Добавлено Автор Ник Источник Просмотров Комментариев Теги
09-10-2015 Михаил Меренков aTmpl © 778 0 эффект фона, разный фон