Imágenes de fondo con efecto Fade

Hemos visto algunos Scripts para cambiar el fondo de un Sitio Web con efectos diversos. Ahora, toca lo del efecto de transición de una imagen a otra de forma progresiva, aumentando y disminuyendo la opacidad. El resultado es muy atractivo, y se consigue con muy pocos recursos, sin enormes Librerías JS, sólo con 1,90 KB (1.950 bytes). Veamos el Script:

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>
<head>
<title>:: BG IMG BIG FADE ::</title>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta name=”copyright” content=”Copyright © 2011 ScriptShow, All Rights Reserved”>
<meta name=”author” content=”ScriptShow Web https://scriptshow.wordpress.com“>
<meta http-equiv=”imagetoolbar” content=”no”>
<style type=”text/css”>
body {
background:#000000;
}

#bgimg {
position:absolute;
position:fixed;
width:100%;
left:0px;
top:0px;
filter:alpha(Opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0;
z-index:1;
}
</style>
<script type=”text/javascript”>
// ===================================
// ScriptShow Web © 2000 – 2011
// https://scriptshow.wordpress.com
// ===================================
var imgnames=new Array(‘imgs/img_01.jpg’,’imgs/img_02.jpg’,’imgs/img_03.jpg’,’imgs/img_04.jpg’,’imgs/img_05.jpg’,’imgs/img_06.jpg’,’imgs/img_07.jpg’,’imgs/img_08.jpg’);

var c=0;
function slidebg(){
obj.src=imgnames[c];
if(c < imgnames.length-1){c++}
else
if(c == imgnames.length-1){c=0}
setTimeout(“fadeimg(0)”, 8000);
fadeimg(1);
}

function init(){
obj=document.all?document.all(“bgimg”):document.getElementById(“bgimg”);
slidebg();
}

var fade=0;
var opac=0;
var goIn=null;
function fadeimg(fade){
if(document.all)obj.filters.alpha.Opacity=opac;
if(!document.all)obj.style.MozOpacity=(opac/100)-0.001;
if(!document.all)obj.style.KHTMLOpacity=(opac/100)-0.001;
if(!document.all)obj.style.opacity=(opac/100)-0.001;
if(fade==1 && opac < 100){opac=opac+2} else{clearTimeout(goIn)}
if(fade==0 && opac > 000){opac=opac-2} else{clearTimeout(goIn)}
if(fade==0 && opac < 002){init()}
goIn=setTimeout(“fadeimg(‘”+fade+”‘)”, 10);
}
</script>
</head>
<body>
<img id=”bgimg” name=”bgimg” src=”imgs/img_01.jpg” border=”0″ alt=”” title=”” />
<script>
init();
</script>
</body>
</html>

Seguiremos haciendo experimentos sencillos, sin derrochar un solo Kb.

Scripts disponibles para descargar. Pulsa aquí

Si lo prefieres, envía un EMail a:

scriptshow@hotmail.com

Imágenes de fondo con efecto Fade

4 comentarios en “Imágenes de fondo con efecto Fade

  1. Yadeivis dijo:

    hola buenas tarde esta idea esta muy bueno lo prove con unas fotos y es muy interesante, pero lo que estoy buscando es un codigo para realizar un camino virtual la cual este tiene que tener efecto y se maneraje el camino por medio de botones, y llamar las fotos de una base de datos…. si tiene algo q me podria ayudar se lo agradeceria… poder enviar a estos correo yade_t145@hotmail.com, ingdesistemaduana@gmail.com,rosichaparro@gmail.com.

  2. Pere dijo:

    Hola.
    He visto tu script y está muy bien.
    Lo he modificado para que funcione con la imagen de fondo de un div. Me funciona perfecto en todos los exploradores menos en IE (como no!!).
    Para que funcione más o menos decente en IE, he insertado otro setTimeout de más para que no te de un ataque cuando empiza a coger velocidad.
    Tienes alguna idea para que funcione igual de bien en IE que en los demás exploradores.
    El código ha quedado así:

    // ===================================
    // ScriptShow Web © 2000 – 2011
    // https://scriptshow.wordpress.com
    // ===================================

    var imgnames=new Array(’01.jpg’,’02.jpg’,’03.jpg’);

    var c=0;
    function slidebg(){
    obj.style.backgroundImage = “url(cabe/” + imgnames[c] + “)”;
    if(c < imgnames.length-1){c++}
    else
    if(c == imgnames.length-1){c=0}
    setTimeout("fadeimg(0)", 8000);

    fadeimg(1);
    }

    var fade=0;
    var opac=0;
    var goIn=null;
    function fadeimg(fade){

    if(document.all)obj.style.filter= "alpha(opacity="+opac+")";
    if(!document.all)obj.style.MozOpacity=(opac/100)-0.001;
    if(!document.all)obj.style.KHTMLOpacity=(opac/100)-0.001;
    if(!document.all)obj.style.opacity=(opac/100)-0.001;

    if(fade==1 && opac 000){opac=opac-2} else{clearTimeout(goIn);}
    if(fade==0 && opac < 002){setTimeout('init()',10);} // <– SI QUITAMOS EL setTimeout IE SE VUELVE LOCO!!
    goIn=setTimeout("fadeimg('"+fade+"')", 20);
    }

    function init(){
    obj=document.all?document.all("fons"):document.getElementById("fons");
    slidebg();
    }

    window.addEventListener?window.addEventListener("load",init,false):window.attachEvent("onload",init);

    Gracias por tu web y tu trabajo.
    Un saludo

  3. Hola,

    muchas gracias por vuestra aportación.

    En un afán por simplificar al máximo el script, el resultado sería algo así:

    // ===================================
    // ScriptShow Web © 2000 – 2011
    // https://scriptshow.wordpress.com
    // ===================================
    var imgnames=new Array(‘imgs/img_01.jpg’,’imgs/img_02.jpg’,’imgs/img_03.jpg’,’imgs/img_04.jpg’,’imgs/img_05.jpg’,’imgs/img_06.jpg’,’imgs/img_07.jpg’,’imgs/img_08.jpg’);

    var c=0;
    function initimg(){
    obj=document.all?document.all(“bgimg”):document.getElementById(“bgimg”);
    obj.src=imgnames[c];
    if(c < imgnames.length-1){c++}
    else
    if(c==imgnames.length-1){c=0}
    }

    var opac=0;
    var stim=null;
    function fadeimg(){
    if(opac == 000){initimg()}
    if(document.all)obj.filters.alpha.Opacity=(opac)-0.001;
    if(!document.all)obj.style.MozOpacity=(opac/100)-0.001;
    if(!document.all)obj.style.KHTMLOpacity=(opac/100)-0.001;
    if(!document.all)obj.style.opacity=(opac/100)-0.001;
    if(opac = 100){valor=-1}
    opac+=valor;
    stim=setTimeout(“fadeimg()”, 20);
    }

    Para ajustar bien el script, hemos de considerar el tamaño de la imagen. El renderizado es más lento en imágenes grandes. También sabemos que el comportamiento de los navegadores es distinto. En fin, con un ajuste del temporizador se puede conseguir un efecto más que aceptable. Seguiremos …

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s