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
http://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
//
http://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:
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.
Saludos, a ver si es algo así lo que precisas.
Aquí tienes unos enlaces relacionados:
http://www.phpalbum.net/
http://www.gallarific.com/
http://www.encaps.net/
http://gallery.menalto.com/
http://coppermine-gallery.net/
http://www.plogger.org/
http://www.phpgalleryscript.org/
Espero sea útil.
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
// http://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
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
// http://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 …