Как сделать плавную смену фона только на JS?

Question

[Ratami Sato]

Имеется код JS смены фона на сайте каждые 5 сек. но меняется он РЕЗКО | Мне нужно сделать так что- бы он менялся плавно. Мне нужно именно JS, НЕ CSS и HTML, а именно JS. Спасибо за понимание и заранее за помощь

$(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]);
 });

Answer 1

[Andrew]

jsfiddle.net/jv8q3u0L примерно так можно организовать.

Comments

[Ratami Sato]

deshot.ru вот что вышло

[Andrew]

reatachi_kun: Логично, зачем Вы на body это хозяйство повесили? Скопируйте код как он есть.

[Ratami Sato]

А если так, то не работает (

[Andrew]

reatachi_kun: CSS точно скопировали?

[Ratami Sato]

да

[Andrew]

reatachi_kun: welcome.js в конец страницы, или оберните js в (function(){ /*code here*/ }); ... Он выполнятся раньше, чем браузер dom-дерево прогружает

[Ratami Sato]

Нет (((. Но все равно спасибо.

[Andrew]

reatachi_kun: Извиняюсь, $(function()

[Andrew]

reatachi_kun: Ну вот, вроде работает)) Картинку с body уберите совсем. и $('.bg1) её ставьте, иначе при анимации она будет проскакивать.

[Ratami Sato]

Убрал уже

Answer 2

[GreatRash]

Как вы себе представляете плавную смену урла?

Comments

[GreatRash]

reatachi_kun: Можно абсолютом положить две картинки и менять у них прозрачность при переключении. Плавно менять картинку на бекграунде нельзя ибо у неё нет альфы.

Answer 3

[Wheelie]

Попробуйте
body.animate(); вместо .css();

Comments

[Ratami Sato]

No (

[Wheelie]

reatachi_kun: jsfiddle.net/M2LmH

[Wheelie]

reatachi_kun: без дополнительного класса можно только всему боди применить анимейт, следовательно появляться будет все , что внутри него. Ну на сколько я знаю и гуглил решения.

[Wheelie]

reatachi_kun: Может есть способ, но пока не знаю.

Answer 4

[Александр Седов]

<script type="text/javascript" src="js/changebackground.js"></script>

	<div id="container" style="">
	<!-- Блок с бэкграундом, фон динамический changebackground.js-->	
	</div>

window.onload = function changebg(){
	
	var path = "url(images/background/";
	var ext = ".jpg)";
	var backs = [];
		
	for(var i = 1; i <= 9; i++){
		var fileNum = ('00' + i).substr(-3);
		var fullPath = path + fileNum + ext;
		backs.push(fullPath);
	}
	
	var randomImg = Math.floor(Math.random() * backs.length);
		
	document.getElementById('container').style.background = (backs[randomImg]);
	document.getElementById('container').style.backgroundSize = "cover";
	document.getElementById('container').style.backgroundRepeat = "no-repeat";
	
	setInterval(changebg, 2000);

условие: изображения должны лежать в (images/background) и обзываться 001.jpg, 002.jpg .... 0xx.jpg