jQuery body background-image rotator

Para un sitio web que estoy diseñando, me gustaría tener los antecedentes del cuerpo en una rotación de una matriz de imágenes. He intentado varias formas, es decir, utilizando las funciones fadeIn() y fadeOut(), pero parecen afectar la opacidad de las divisiones dentro del cuerpo. También intenté usar bgStretcher, pero esto causó problemas de apariencia e hizo que el sitio web fuera lento y entrecortado.jQuery body background-image rotator

Preferiría que las imágenes se desvanezcan. ayuda se agradece,

Here's a link to the website El archivo de script que actualmente han modificado se llama background.js bajo el/js/directorio. El archivo actualmente está comentado ya que solo es experimental. Las dos imágenes de fondo actuales son "imágenes/bg/bg1.jpg" y "images/bg/bg2.jpg"

Aquí está mi código actual, que estoy tratando de conseguir trabajo:

$(document).ready(function() { 
    setInterval(switchImage, 5000); 
    switchImage(); 

}); 

function switchImage() 
{ 
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000); 
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000); 
}

Una vez que puedo descifrar cómo hacer la transición entre las imágenes de fondo, puedo agregar algunas condiciones para cambiar entre una matriz de imágenes.

Cheers, Dane Wilson

Fuente

2012-06-02 Dane Wilson

Por favor, publique el código correspondiente, con el que desea nuestra ayuda, * aquí en su pregunta *. E, idealmente, publique una [demostración en vivo] (http://jsfiddle.net/); de lo contrario, una vez resuelto el problema, esta pregunta no tendrá más uso (ya que el código del problema se corregirá/eliminará de la página que enlaza a) –

muy sencilla con este plugin de jQuery: jQuery Backstretch En las demostraciones "Uso Backstretch en una presentación de diapositivas" es un código de fragmento de la misma.

Fuente

2012-06-02 11:56:04

Esto funcionaba igual que bgStretcher que mencioné anteriormente, pero el código es mucho más pequeño y agradable. Me di cuenta de lo que estaba causando que fuera lento y agitado. Fue porque estaba tratando de usar un PNG superpuesto que tiene propiedades transparentes que causan problemas de representación. Lo arreglé guardando mis imágenes con la superposición de patrones pre-aplicada –

Esto se puede hacer con css3 solamente. Voy a publicar un violín pronto.

EDIT: intenté hacer una animación con fotogramas clave y tamaño de fondo de CSS3, pero aparentemente no querían trabajar juntos demasiado bien (destellos). Probablemente sea mejor mirar a jQuery entonces.

Fuente

2012-06-02 12:07:39

jQuery body background-image rotator

Respuesta

Cuestiones relacionadas