[SOLUCIONADO] ¿Cómo emplear las transiciones CSS para lograr efecto FADE al cambiar el background?

berkeleyPunk · #1 (**permalink**) 15/12/2013, 19:38

Buena noche.

Tengo un Javascript que hace que cada cierto tiempo, y aleatoriamente, la imagen de background se cambie por otra de entre 6 posibles imágenes.

Código Javascript:

Ver originalsetInterval( function()
{
    var numColorAleatorio = Math.floor( Math.random()*6 );
    document.getElementById("body").style.backgroundImage = 'url(fondo_0' + numColorAleatorio + '.jpg)';    
}, 5000);

En el HTML sólo se pone ID al body:

Código HTML:

Ver original<body id="body">

Quisiera que al realizarse el cambio de fondo, éste fuera suave, recurriendo a las transiciones CSS.
He probado con esto:

Código CSS:

Ver original#body {transition:all ease 2s;}

Yo esperaría que este CSS hiciera que el cambio de background fuera suave, pero hace extraños desagradables.

PD. Encontré un Javascript que hace lo que necesito: http://www.disegnocentell.com.ar/notas2.php?id=203 Pero quisiera saber si se puede hacer con CSS.

Saludos, cordiales.

pzin · #2 (**permalink**) 16/12/2013, 01:11

No se puede animar una imagen de fondo porque no es una propiedad animable: https://developer.mozilla.org/en-US/...ted_properties

Si acaso podrías animar imágenes normales y mostrarlas como si fueran imágenes de fondo, con posiciones absolutas y demás.

berkeleyPunk · #3 (**permalink**) 18/12/2013, 14:37

Cita:

Iniciado por pzin

No se puede animar una imagen de fondo porque no es una propiedad animable: https://developer.mozilla.org/en-US/...ted_properties
Si acaso podrías animar imágenes normales y mostrarlas como si fueran imágenes de fondo, con posiciones absolutas y demás.

Gracias por responder, maestro pzin. Ya chequé el enlace y tienes razón, el background no es animable. Excepto el background-color.
Intenté más opciones, no con background sino con las imágenes, como dices, pero tampoco me salió, principalmente porque si quiero cambiar la imagen de una etiqueta <img> tengo que llamar la propiedad background-image, que no es animable. Si llamo la propiedad src, tampoco me funciona.

Me rendí.

Por esta razón, si no se puede con CSS, entonces quiero lograr el efecto fade con Javascript. Ya casi lo logro, pero aún tengo problemas. Abrí un nuevo post para esto: http://www.forosdelweb.com/f13/como-...2/#post4544952

De todas formas gracias por hacerme saber, porque no lo sabía (más bien creo que no recordaba), que no todas las propiedades HTML son animables.

pzin · #4 (**permalink**) 18/12/2013, 15:07

Cita:

Iniciado por berkeleyPunk

que no todas las propiedades HTML son animables

De hecho ninguna propiedad de HTML es animable. Sólo de CSS.

berkeleyPunk · #5 (**permalink**) 25/12/2013, 17:55

Cita:

Iniciado por pzin

De hecho ninguna propiedad de HTML es animable. Sólo de CSS.

Ok, entendido.

Gracias y felices fiestas.

PD. Apenas llevo 1 año metido de lleno al mundo web. He aprendido varias cosas: CSS, JS... Y prácticamente no hay un día en que no aprenda algo nuevo. Son tantas cosillas, propiedades, atributos, funciones, etcétera, etcétera, que en verdad es todo un mundo de información y conceptos aquí en la programación web.

pzin · #6 (**permalink**) 26/12/2013, 06:58

Si son muchas cosas. Supongo que por eso también se ha perdido un poco la figura del webmaster y ahora es todo más especializado (programadores, maquetadores, diseñadores, etc), para enfocar bien el conocimiento de cada cual.
Ya es muy difícil tener conocimiento total sobre una cuestión como para tenerlo de todo. Pero bueno, al final lo que se va aprendiendo no se va olvidando o al menos se queda una huella en la memoria que nos vale para que Google nos lo recuerde.