veux faire du changement de BGS en douceur comme la décoloration

Question

J'ai passé plusieurs jours à essayer de comprendre comment animer les transitions d'image d'arrière-plan, mais je ne trouve pas de solution. Je suis nouveau dans le développement Web, alors ne soyez pas dur;)

Voici quelques exemples de code que j'ai obtenus de quelqu'un d'autre:

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);

Ce code modifie l'image d'arrière-plan instantanément, mais je veux que la nouvelle image d'arrière-plan disparaisse.

Voici un lien vers la page que je crée:

http://preferredmerchantservices.net/

J'espère que quelqu'un pourra m'aider et merci d'avance.

Answer 1

Si vous ne voulez pas perdre trop de temps à essayer de vous comprendre, vous devez utiliser une bibliothèque comme jquery. Avec ça, c'est juste une question de fadeIn() et fadeOut().

Étant donné que vous êtes un novice en développement Web, vous devez savoir que jQuery est une bibliothèque très populaire que presque tout le monde utilise de nos jours. Il vous permet d'écrire moins de code et de faire plus.

Mais surtout, il assure la compatibilité croisée du navigateur.

Answer 2

Jetez un œil à cette question:

S'estomper dans une image d'arrière-plan

Voici un lien qui explique comment faire une transition de fondu avec jQuery:

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

Si vous avez besoin de la bibliothèque jQuery, vous pouvez coller ce code dans votre page:

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