Foto Fade (efecto)

Un efecto (aparece desaparece progresivo) que, aplicado a imágenes, texto, etc. queda mejor que si lo hacemos bruscamente. En el caso que nos ocupa, se trata de ampliar una imagen quedando en primer plano con respecto de la página. Un Foto Fade …

El script sería más o menos así:

<html>
<head>
<title>[ F o t o F a d e ]</title>
<meta http-equiv=”imagetoolbar” content=”no”>
<style type=text/css>
<!–
body { padding:0px; margin:0px; font-size:16px; font-family: verdana, helvetica, arial; }
#matte { position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:2; text-align:center;
background-color:#000000;
filter:alpha(opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0;
}
.img img { border:#DDDDDD 2px solid; }
.img:hover img { border:#DDDDDD 4px solid; }
//–>
</style>
<script type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
opac=0;
stim=null;

function fadelayer(dir){
if(document.all){document.all(“matte”).filters.alpha.Opacity=opac}
if(document.getElementById && !document.all){document.getElementById(“matte”).style.KHTMLOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(“matte”).style.MozOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(“matte”).style.opacity=(opac/100)-0.01}
if(opac>=0){document.getElementById(“matte”).style.width=100+”%”}
if(opac<=0){document.getElementById(“matte”).style.width=000+”%”}
if(dir==1 && opac<=87){opac+=3} else{clearTimeout(stim)}
if(dir==0 && opac>=03){opac-=3} else{clearTimeout(stim)}
stim=setTimeout(“fadelayer(‘” + dir + “‘)”, 10);
}
//–>
</script>
<script type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
function showlayer(url,txt){
document.getElementById(“matte”).innerHTML=”<img id=’img1′ name=’img1′ vspace=’40’ src='”+url+”‘><br><strong style=’color:#DDDDDD’>[ Foto Fade “+txt+”]</strong><br>”;
document.getElementById(“bodId”).style.overflow=”hidden”;
document.getElementById(“matte”).style.width=100+”%”;
document.getElementById(“matte”).style.height=100+”%”;
fadelayer(1);
}

function hidelayer(url,txt){
document.getElementById(“matte”).innerHTML=”<br><strong style=’color:#DDDDDD’>[ “+url+” “+txt+” ]</strong><br>”;
document.getElementById(“bodId”).style.overflow=”auto”;
document.getElementById(“matte”).style.width=100+”%”;
document.getElementById(“matte”).style.height=100+”%”;
fadelayer(0);
}
//–>
</script>
</head>
<body id=”bodId”>
<div id=”matte” onclick=”hidelayer(‘Script’,’Show’)”></div>
<a href=”#” class=”img” onclick=”showlayer(‘img-01.jpg’,’img 1′);this.blur();return false”><img src=”img-01.jpg” width=”79″ height=”59″ border=”0″ vspace=”20″ hspace=”40″></a>
<a href=”#” class=”img” onclick=”showlayer(‘img-02.jpg’,’img 2′);this.blur();return false”><img src=”img-02.jpg” width=”79″ height=”59″ border=”0″ vspace=”40″ hspace=”40″></a>
<a href=”#” class=”img” onclick=”showlayer(‘img-03.jpg’,’img 3′);this.blur();return false”><img src=”img-03.jpg” width=”79″ height=”59″ border=”0″ vspace=”60″ hspace=”40″></a>
<a href=”#” class=”img” onclick=”showlayer(‘img-04.jpg’,’img 4′);this.blur();return false”><img src=”img-04.jpg” width=”79″ height=”59″ border=”0″ vspace=”80″ hspace=”40″></a>
<marquee width=”100%” height=”140″ align=”middle” behavior=”scroll” scrolldelay=”20″ direction=”left” scrollamount=”2″ truespeed><strong style=”color:#DDDDDD”>[ FOTO FADE ]</strong></marquee>
<strong>C O N T E N I D O S P O S I B L E S [ Texto, Fotos, Otros ]</strong> <a href=”http://www.murciaregion.net/scriptshow”>scriptshow &copy; 2008</a>
</body>
</html>

Espero sea útil para experimentar, incluso para utilizarlo directamente.
Me consta que, una mayoría prefieren los scripts funcionando y con las imágenes (queda más bonico), pero estoy seguro que, cuando pongáis las vuestras y, con algún retoque personal, quedará “perfecto”.

P.D.: el tamaño del script es de unos 3Kb. No hace falta más…

Foto Fade (efecto)

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