Как затухать петлевые фоновые изображения?

Rookie здесь .. Я пытаюсь сделать мой статический фон стать карусельного .. мой текущий HTML выглядит примерно так:Как затухать петлевые фоновые изображения?

<body> 
    <div class="pageContent"> 
    </div> 
</body>

и мой CSS:

body { 
    background: url('http://placehold.it/1600x1200') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Так что я бы например, чтобы сделать фоновый рисунок теперь цикличным и оставаться отзывчивым. Можно ли это сделать легко с помощью CSS3? или я могу, возможно, обернуть содержимое своего html в карусели с помощью бутстрапа? Я не смог найти хороший пример того, как это сделать. Заранее спасибо.

источник

2014-09-12 SuperVeetz

Вы можете: http://vegas.jaysalvat.com/ – YOU

знать какие-либо учебники? никогда не использовал vegas раньше, так что я не совсем уверен, что это такое. – SuperVeetz

Вы можете увидеть: http://vegas.jaysalvat.com/documentation/setup/ Его очень легкий и отзывчивый фон :) – YOU

jsBin demo

Full page gallery fade

Я хотел бы сделать это с помощью absolute, расположенный DIV накладывая на body. Микширование в DIV с новым изображением, а затем установить такое же изображение, чтобы body и скрыть DIV, как: _{(серый цвет BODY, SOrange является DIV)}

Responsive background fade gallery logic

Приращение текущего изображения Массив достигается путем предварительного кодирования ++counter.

Фиксация петли достигается с помощью Оператор останова%, чтобы предотвратить превышение количества счетчиков в массиве.

Сам цикл выполнен внутри функции .fadeTo() callback, просто сделайте новую итерацию функции loopBg().

Это необходимо CSS:

*{margin:0;padding:0;} /* Global reset */ 
html, body{height:100%;width:100%;} 
body, #bg{ background: #000 none 50%/cover; } 
#bg{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    width:100%; 
    height:100%; 
}

И JQ:

var images = [ 
    "bg0.jpg", 
    "bg1.jpg", 
    "bg2.jpg" 
]; 
var $body = $("body"), 
    $bg = $("#bg"), 
    n = images.length, 
    c = 0; // Loop Counter 

// Preload Array of images... 
for(var i=0; i<n; i++){ 
    var tImg = new Image(); 
    tImg.src = images[i]; 
} 

$body.css({backgroundImage : "url("+images[c]+")"}); 

(function loopBg(){ 
    $bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200, 1, function(){ 
    $body.css({backgroundImage : "url("+images[c%n]+")"}); 
    loopBg(); 
    }); 
}());

Edit: Если вы хотите сохранить фон меняется, но сделать содержание прокручивать, просто добавьте overflow:auto; до #page, как в этом демо: http://jsbin.com/huzayiruti/1/

источник

2014-09-12 03:37:03

просто ничего себе! спасибо за великое объяснение и визуальные эффекты. Я действительно попытаюсь заставить это работать на моей странице. Мог бы взять меня на день или около того .. но поистине отличный ответ! Спасибо – SuperVeetz

@AlexDiVito добро пожаловать –

(я исправил небольшую проблему в коде (цикл предварительной загрузки был выключен, изменен 'i <0' ошибка на' i

> Привет! для этого вы должны работать с «слоями» и JQuery, например:

<div id="slider1_container"> 
    <div><img src="image1.jpg" /></div> 
    <div><img src="image2.jpg" /></div> 
    <div class="wraper"> 
      .........code 
    </div> 
</div>

и в CSS вы положили код Совместите DIV спереди или назад ... JQuery как то :

<script src="jquery.min.js"></script> 
<script src="jssor.slider.mini.js"></script> 
<script> 
    jQuery(document).ready(function ($) { 
     var options = { $AutoPlay: true }; 
     var jssor_slider1 = new $JssorSlider$('slider1_container', options); 
    }); 
</script> 
and css like that: 

position: relative; top: 0px; left: 0px; height: 1000px;

*> помните, это просто пример, вы должны изменить код для работы, как вы

need.and всегда существуют примеры в го е Интернет вы можете ознакомиться здесь: *

example slider background

> привет я надеюсь помочь вам!

источник

2014-09-12 01:31:13

-1

я в конечном итоге найти страницу, которая была именно то, что я искал:

Bootstrap carousel as website background

направит вас к http://untame.net/2013/04/twitter-bootstrap-carousel/ и примерно на полпути вниз страницы покажет вам, как сделать загрузочный фон карусель без кодирования любого JQ за исключением:

$(document).ready(function() { 
    $('.carousel').carousel({interval: 7000}); 
});

удивительный!

источник

2014-09-12 16:38:47 SuperVeetz

IMHO, самый ужасный плагин, который вы могли бы найти ... вы его нашли! Карусель может работать, но это то, что он делает для фона: http://mode87.com/untame/ demo/carousel/background.html (обратите внимание на эффект * fade-to-white-cause-we-don -t-know-how-to-work-out-transitions *) –

ugh well .. я столкнулся с этой проблемой где фон исчезнет и просто покажет белизну всякий раз, когда прокручивается страница, поэтому я сейчас перехожу к ответу Роко!: P у меня такая же проблема, как и раньше, но переполнение : авто; не работает .. будет делать bootply, если я не могу понять это в ближайшее время .. – SuperVeetz

исправил его .. thnx снова – SuperVeetz

Как затухать петлевые фоновые изображения?

ответ

Смежные вопросы