Как реализовать плавную смену фона?

Question

[Ratami Sato]

Имеется код JS, который производит смену изображения на сайте каждые 5 секунд

$(function() {
  var body = $('body');
  var backgrounds = ['url(http://wallpaperscraft.ru/image/abstraktsiya_svet_neon_blesk_97687_1920x1080.jpg)', 'url(http://www.nastol.com.ua/pic/201110/1920x1080/nastol.com.ua-8536.jpg)', 'url(http://hq-oboi.ru/photo/sumasshedshaya_abstrakciya_1920x1080.jpg)', 'url(http://www.motto.net.ua/pic/201209/1920x1080/motto.net.ua-18073.jpg)', 'url(http://rewalls.com/pic/201110/1920x1080/reWalls.com-50910.jpg)'];
var current = 0;

function nextBackground() {
  body.css(
   'background',
    backgrounds[current = ++current % backgrounds.length]
 );

 setTimeout(nextBackground, 5000);
 }
 setTimeout(nextBackground, 5000);
   body.css('background', backgrounds[0]);
 });

У меня к вам вопрос. Как сделать смену изображений плавной а не резкой?
Именно JS.

Answer 1

[Stalker_RED]

Можно менять не сам бекграунд, а класс. И к классам прикрутить css transition

Comments

[Виталий Инчин ☢]

css transition работает только с числами (да, цвета - это на самом деле числа)....

Answer 2

[Виталий Инчин ☢]

1)

css transition работает только с числами (да, цвета - это на самом деле числа)....

Так что придется исхитриться.

2) Можно использовать CSS-Спрайты, но плавность тогда будет заключаться в сдвиге фона.

3) А можно реализовать это дело с помощью 2 блоков и баловства с их свойствами:

• Изначально верхний будет виден, у него будет фон.
  
• Далее будет изменяться багроунд нижнего,
  
• Прозрачность верхнего,
  
• z-index нижнего/верхнего.
  

И так они будут поочередно меняться местами, создавая эффект плавной смены фона. Лучше использовать те же спрайты (или не менять фон, пока новый не загрузится), т.к, изображения могут долго загружаться.

4) Я ни зачто не поверю, что вы пробовали, а так же пытались искать в гугле.

Comments

[Ratami Sato]

Искал, долго

Answer 3

[Pavel O]

можешь глянуть как сделано на isaacy.ru