[SOLUCIONADO] ¿Cómo hacer background aleatorio cada x tiempo y con efecto FADE?

berkeleyPunk · #1 (**permalink**) 18/12/2013, 14:27

Buena tarde, ojalá puedan ayudarme.

Quiero hacer lo sig: que la imagen de background cambie aleatoriamente cada x tiempo, y que la transición entre imágenes tenga el efecto fade. Eso es todo.

El siguiente código funciona para la parte de que el background cambie cada 3 segundos de forma aleatoria.

Código Javascript:

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

La bronca está con lo del efecto fade. Googleando me encontré con este sitio: http://www.disegnocentell.com.ar/notas2.php?id=203, en el cual hay un javascript para hacer el efecto FADE-in y FADE-out a una imagen.

Le he movido por todos lados para adecuarlo a mis necesidades, pero no logro hacerlo funcionar como deseo. Aquí les pongo lo que llevo hasta el momento. No logro avanzar más. El sig código hace casi lo que necesito, con la diferencia que el efecto fade lo hace sólo entre la 1ra y 2da imágenes, no al resto. Pongo de una vez todo el código del archivo para evitarles la molestia del copy-paste por partes.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>FADE IN OUT ALPHA</title>
<style type="text/css">
html, body {width:100%; height:100%;}
</style>
 
<script> 
function set_opacity(div, value) { 
    div.style.opacity = value; 
    div.style.MozOpacity = value; 
    div.style.KhtmlOpacity = value; 
    div.style.filter = 'alpha(opacity=' + value*100 + ')'; 
    div.style.zoom=1;//necesario para Explorer 
} 
var transicion=function(inicio,fin,segundos){ 
    var _this=this; 
    this.test=0; 
    if(_this.intervalo)clearInterval(_this.intervalo); 
    if(this.val && Math.abs(fin-_this.val)<0.01)return; 
    this.val=!this.val?inicio<1?inicio+.0001:inicio:this.val; 
    set_opacity(this, this.val); 
    this.pasos=(fin-inicio)/100; 
    this.pausa=segundos*10; 
    this.intervalo=setInterval( 
    function(){ 
        if(_this.test>99 || Math.abs(fin-_this.val)<0.01){ 
          clearInterval(_this.intervalo); 
        } 
        _this.test++; 
        //document.getElementById("log").innerHTML=_this.test; 
        _this.val=_this.val+_this.pasos; 
        if(_this.val<=.01)  
            _this.style.display='none'; 
        else 
            _this.style.display='block'; 
        set_opacity(_this, _this.val); 
    },this.pausa); 
} 
 
function ver(){ 
    var obj=document.getElementById("fondo"); 
    transicion.call(obj,0,1,3);
//  setTimeout( cerrar(), 4000); //Entiendo que debería funcionar la función cerrar() 4 segundos después que termina de ejecutarse la función ver(), pero no pasa así.
} 
 
 
function cerrar(){ 
    var obj=document.getElementById("fondo"); 
    transicion.call(obj,1,0,3); 
} 
 
 
 
    
/* *****************************************************************************************
   *****************************************************************************************
   ****   El siguiente código hace que se cambie aleatoriamente de background, pero el  ****
   ****   FADE sólo funciona entre la 1ra y 2da imágenes. Al resto no les pone FADE.    ****
   *****************************************************************************************
   ***************************************************************************************** */
setInterval( function()
{
    ver();
    var numColorAleatorio = Math.floor( Math.random()*6 );
    document.getElementById("fondo").style.backgroundImage = 'url(fondo_0' + numColorAleatorio + '.jpg)';
}, 3000);
 
</script>   
</head> 
 
<body>
  <div id="fondo" style="position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(fondo_01.jpg)">
  </div>
</body> 
</html>

Saludos cordiales.

cell001 · #2 (**permalink**) 18/12/2013, 14:43

No se mucho de JS pero te podría servir esto http://buildinternet.com/project/supersized/

En la pagina "demos" hay una version con FADE. Yo la utilicé para una pagina y me sirvió bastante bien, en el demo viene también un archivo donde puedes cambiar por la cantidad de tiempo que quieras, el tiempo que tarda en hacer el efecto, las imágenes y modificando un poco mas también puedes quitarle los botones que tiene para que solo cambie el fondo automáticamente sin intervención del usuario

El único detalle es que utiliza JQuery pero para eso utilizas ya sea el de gogle o uno propio

Suerte

berkeleyPunk · #3 (**permalink**) 18/12/2013, 17:56

Cita:

Iniciado por cell001

No se mucho de JS pero te podría servir esto http://buildinternet.com/project/supersized/ ...

Gracias por responder, cell001. Ya revisé el link que dejaste. Es bueno, me gustó. La bronca con estas cosas, es que no satisfacen las necesidades de programación que algunos tienen en mayor o menor medida, pues todo ya está hecho. Además, si por alguna razón falla el servidor donde están alojados esos proyectos, automáticamente se cae la parte de tu página que ocupa su framework. No hay nada mejor que tener todo el código en tu propio servidor. Sin embargo, el tal Supersized te saca de problemas y, como sea, es un recurso más. Todo sirve.

No obstante, esperemos que alguien más pueda ayudar con el código que posteé más arriba.

cell001 · #4 (**permalink**) 18/12/2013, 20:59

En parte es cierto, yo también prefiero hacer por mi mismo los códigos que hago por completo pero como recién estoy aprendo JS es por lo que los uso.

Sin embargo lo que comentas sobre que falle el servidor es un tanto falso, todo lo puedes hacer usando tu propio servidor sin que necesites depender de otro servidor "x"

Deja te muestro:

Si descargas el rar, hay una carpeta llamada slideshow, dentro hay un archivo llamado fade.html

Ese archivo tiene las imagenes de ejemplo que salen en el ejemplo, pero puedes poner cualquier cantidad de imagen que desees en tu servidor, solo colocando el link correctamente.

Ejemplo:

Código HTML:

Ver original// Este es un pedazo del codigo donde están las imágenes
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
 
//Tu solo cambialo por los links que desees y para que no aparesca el cursor de vinculo, quitas los URL ultimos asi
 
{image : 'images/tuimagen.jpg',}, {image : 'images/tuimagen2.jpg',},  //etc etc

Dentro del archivo fade.html también hay un vinculo que dice:

Código:

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

Este es el único link que si falla, puede fallar todo pues es un servidor externo al propio pero se puede utilizar un link propio. Solo hay que descargar el jquery y colocarlo en el servidor propio, se puede descargar de aquí http://jquery.com/download/ (jQuery 1.x o jQuery 2.x compressed), al final podria quedar algo asi:

Código HTML:

Ver original<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

Y así no tendrías que depender de ningún servidor externo

Espero te sirva o a quien guste

berkeleyPunk · #5 (**permalink**) 20/12/2013, 18:13

Cita:

Iniciado por cell001

En parte es cierto, yo también prefiero hacer por mi mismo los códigos que hago por completo pero como recién estoy aprendo JS es por lo que los uso...

Tienes razón amigo cell001.

Por otro lado, en Internet Explorer 8 no funciona el proyecto Superzided que recomendaste. Hoy mismo actualicé el IE a la versión 9, y tampoco jaló. Actualicé inmediatamente al 10 y nada! Actualicé a la versión 11 y por fin jaló el Superzided y unas transiciones CSS que yo le había metido a mi menú.

Por eso necesitaba arreglar el código que posteé en un principio, porque incluso Internet Explorer 8 lo jala.

Tendré que buscar por otro lado.

IsaBelM · #6 (**permalink**) 21/12/2013, 06:52

prueba con este. falta la aleatoriedad

berkeleyPunk · #7 (**permalink**) 25/12/2013, 17:36

Cita:

Iniciado por IsaBelM

prueba con este. falta la aleatoriedad

Maestra IsabelM. Buen código y muy ligero. Y a diferencia del proyecto Superzided recomendado por el amigo Cell, sí jala en las versiones feas de IE.

Gracias.