quiero hacer que el cambio de bgs sea suave como cosas que se desvanecen

Question

He pasado muchos días tratando de averiguar cómo animar las transiciones de las imágenes de fondo, pero no puedo encontrar una solución.Soy nuevo en el desarrollo web, así que no seas duro;)

Aquí hay un código de ejemplo que obtuve de otra persona:

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 cambia la imagen de fondo instantáneamente, pero quiero que la nueva imagen de fondo se desvanezca.

Aquí hay un enlace a la página que estoy creando:

http://preferredmerchantservices.net/

Espero que alguien pueda ayudarme y gracias de antemano.

Answer 1

Si no quiere perder demasiado tiempo tratando de averiguarlo por sí mismo, debe usar una biblioteca como jQuery .Con eso, es solo una cuestión de fadeIn() y fadeOut().

Ya que es un novato en el desarrollo web, debe saber que jQuery es una biblioteca muy popular que casi todo el mundo usa hoy en día.Te permite escribir menos código y hacer más.

Pero lo más importante es que garantiza la compatibilidad entre navegadores.

Answer 2

Eche un vistazo a esta pregunta:

Desvanecimiento en una imagen de fondo

Aquí hay un enlace que explica cómo hacer una transición de fundido con jQuery:

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

Si necesita la biblioteca jQuery, puede pegar este código en su página:

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