quero fazer a mudança de bgs suavemente como coisas que desaparecem

Question

Passei muitos dias tentando descobrir como animar as transições das imagens de fundo, mas não consigo encontrar uma solução.Eu sou novo no desenvolvimento web, então, por favor, não seja severo;)

Aqui está um exemplo de código que obtive de outra pessoa:

var images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);

Este código muda a imagem de fundo instantaneamente, mas quero que a nova imagem de fundo apareça gradualmente.

Aqui está um link para a página que estou criando:

http://preferredmerchantservices.net/

Espero que alguém possa me ajudar e desde já agradeço.

Answer 1

Se você não quer perder muito tempo tentando descobrir sozinho, você deve usar uma biblioteca como jQuery .Com isso, é apenas uma questão de fadeIn() e fadeOut().

Já que você é um novato em desenvolvimento web, você deve saber que jQuery é uma biblioteca muito popular que quase todo mundo usa hoje em dia.Ele permite que você escreva menos código e faça mais.

Mas o mais importante, ele garante compatibilidade entre navegadores.

Answer 2

Dê uma olhada nesta pergunta:

Esmaecimento em uma imagem de plano de fundo

Aqui está um link que explica como fazer uma transição de fade com jQuery:

http://jqueryfordesigners.com/image-loading/

Se precisar da biblioteca jQuery, você pode colar este código em sua página:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>