Imagen cambiante en el fondo SIN Flash ¿Cómo se hace?

RAZGRIZ24 · #1 (**permalink**) 18/07/2013, 07:50

Hola compañeros,

Recién comienzo un nuevo proyecto de diseño Web.

Aunque he diseñado Webs antes, hace un tiempo que estaba fuera del negocio y ahora por determinadas cuestiones pues voy a hacer 1 diseño nuevo. La cosa es que nunca había planteado hacer lo que quiero hacer en ésta ocasión:

Antes, cuándo quería un fondo cambiante, simplemente diseñaba en Flash, pero eso es tecnología obsoleta y quiero una web fresca, operativa 100 y eficiente; por lo que mi cuestión es:

Quiero un fondo cuya imagen vaya cambiando cada X segundos ¿Cómo se hace eso?¿Es una etiqueta DIV con JS?¿Es simplemente JS aplicado al atributo background de "body"?

¡Gracias por orientarme foreros!

pzin · #2 (**permalink**) 18/07/2013, 08:49

Podrías usar animaciones CSS para conseguirlo.

Para que te hagas una idea, algo así:

Código CSS:

Ver originalbody {
  animation: cambiarfondo 60s linear;
}
 
@keyframes cambiarfondo {
  0% {
    background-image: url(perro.png);
  }
  33% {
    background-image: url(gato.png);
  }
  66% {
    background-image: url(iguana.png);
  }
}

kikeking1 · #3 (**permalink**) 19/07/2013, 01:47

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<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Example Background</title>
        <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
        <style>
            #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; }
        </style>
    </head>
 
    <body>
 
        <div id='background' style='background-image: url("http://www.as.com/recorte/20090603dasdaimas_4/XLCO/Ies/Two_Yupa_siempre_forma.jpg");'></div>
        <div id='body'>
 
            <h1>Hello world</h1>
 
        </div>
 
        <script type="text/javascript">
 
            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' ];
            var delay = 5000, //indica el tiempo entre cambio de imagenes
                fade = 500; //indica el tiempo que tarda la transición
 
            function preload(src){
                $.each(src, function(index, value) {
                    $('<img/>').attr({'src':value});
                });
            }
 
            function change(i){
                $('#background').delay(delay).fadeOut(fade,function(){ 
                    $(this).css({'background-image':'url('+src[i]+')'}).fadeIn(fade, function(){
                        i++;
                        if(i==src.length){ i=1; };
                        change(i);
                    }) 
                });
            }
 
            $(function(){
                preload(src);
                change(1);
            })
 
        </script>
 
    </body>
</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.

pzin · #4 (**permalink**) 19/07/2013, 06:07

Cargar una librería entera para esto lo veo desproporcionado. Cualquier día cogeré un ascensor y resulta que funcionará con jQuery.

Mi ejemplo era una base de donde partir. Se puede perfectamente crear un contenedor con varias imágenes y aplicar transiciones, no sería ningún problema.

Rafael · #5 (**permalink**) 19/07/2013, 12:55

Cita:

Cargar una librería entera para esto lo veo desproporcionado.