Tema: Imagen cambiante en el fondo SIN Flash ¿Cómo se hace?
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 19/07/2013, 01:47
kikeking1
 
Fecha de Ingreso: junio-2009
Mensajes: 128
Antigüedad: 15 años, 6 meses
Puntos: 17
Respuesta: Imagen cambiante en el fondo SIN Flash ¿Cómo se hace?
El problema que le veo a la solución de Pzin, es que background-image, no realiza transiciones y vas a tener saltos brusco con cada cambio de foto, aparte de un leve tiempo de vacio durante los primeros cambios (ya que las imagenes se cargan cuando pasas la url).

Para dejarlo más bonito y estetico, lo suyo sería usar javascript, y un contendor dedicado para esto.

Te paso un ejemplo en jquery con desvanecimiento de la fotos a ver si te sirve. Con el css es mas liviano para el navegador, pero esta el fallo de la transición de background y nuestras versiones obsoloteas del amigo IE y su compatibilidad a css3...

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html lang="es">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Example Background</title>
  6.         <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
  7.         <style>
  8.             #background {background-color: #FEFEFE; background-position: center center; background-repeat: no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; }
  9.         </style>
  10.     </head>
  11.  
  12.     <body>
  13.  
  14.         <div id='background' style='background-image: url("http://www.as.com/recorte/20090603dasdaimas_4/XLCO/Ies/Two_Yupa_siempre_forma.jpg");'></div>
  15.         <div id='body'>
  16.  
  17.             <h1>Hello world</h1>
  18.  
  19.         </div>
  20.  
  21.         <script type="text/javascript">
  22.  
  23.             var src = [ 'http://www.as.com/recorte/20090603dasdaimas_4/XLCO/Ies/Two_Yupa_siempre_forma.jpg', 'http://images.china.cn/attachement/jpg/site1006/20070913/001111015d890852f74214.jpg', 'http://bodyparts.webcindario.com/Prueba%20fotos/album/slides/fotos-de-chicas-guapas-tetas.jpg', 'http://www.motorspain.com/wp-content/uploads/2007/12/elisabetta-gregoraci-00.jpg', 'http://27.media.tumblr.com/tumblr_l9yjtc8RPV1qzd31no1_500.jpg' ];
  24.             var delay = 5000, //indica el tiempo entre cambio de imagenes
  25.                 fade = 500; //indica el tiempo que tarda la transición
  26.  
  27.             function preload(src){
  28.                 $.each(src, function(index, value) {
  29.                     $('<img/>').attr({'src':value});
  30.                 });
  31.             }
  32.  
  33.             function change(i){
  34.                 $('#background').delay(delay).fadeOut(fade,function(){ 
  35.                     $(this).css({'background-image':'url('+src[i]+')'}).fadeIn(fade, function(){
  36.                         i++;
  37.                         if(i==src.length){ i=1; };
  38.                         change(i);
  39.                     }) 
  40.                 });
  41.             }
  42.  
  43.             $(function(){
  44.                 preload(src);
  45.                 change(1);
  46.             })
  47.  
  48.         </script>
  49.  
  50.     </body>
  51. </html>

Esto podria definirse como un "slide a pantalla completa" si necesitas más opciones o te las programas tu o puedes recurrir a pluggins jquery como supersized o similares.

Espero que te sirva, un saludo.