Имею вот такой код, он крутит по счётчику бекграундные картинки из заданной диры, никак не получается сделать плавное растворение и перетекание из одной картинки в другую. Меняется не то что совсем резко, но той красивой плавности не могу достичь. Вопрос скорее по CSS, хотя мне кажется JS такое тоже умеет.
|
Код:
|
<script>
var coin = 1;
var changeBg = function() {
$('.item').css('background', 'url(assets/img/backgrounds/' + coin++ + '.jpg)');
if (coin > 3)
coin = 1;
}
setInterval(changeBg, 3000);
</script>
<style>
.item .background {
background-color: rgba(0,0,0,0.75);
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
</style>
<div class="item">
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
</div> |