Al no recibir respuestas que me convencieran sobre el Tema tuve que investigar mucho más, pero esta vez me dediqué a buscar en las Páginas en inglés y encontré esta:
http://brainerror.net/
http://www.brainerror.net/scripts_js_blendtrans.php
http://brainerror.net/scripts/javasc...rans/demo.html
donde realmente existen los mejores efectos de FADE (blending) opacado para Imágenes, este me pareció el mejor Script que existe para este Efecto.
También encontré otra Página de un Foro en inglés, donde habían modificado este Script para realizar un Efecto Fade de Página (que es lo que en realidad me interesa), hay dos líneas en la parte inferior:
Código PHP:
//OPEN DIV code
javascript:opacity('help1', 0, 100, 500)
//CLOSE DIV code
//javascript:opacity('help1', 100, 0, 500)
Necesito de vuestra ayuda aquí, ya que no estoy tan interesado el Efecto Fade cuando se ingresa a la Página, sino que al SALIR desde la mía obteniendo este efecto, pero ni idea de cómo hacerlo.
¿De que manera puedo modificar este código para que el efecto Fade se vea perfectamente al cambiar a otra página?
Código PHP:
<Head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.opac_xmpl {
padding: 3px;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
position: absolute;
float: right;
z-index: 1;
display: compact;
border: thin solid #3300FF;
}
.hidden {
visibility: hidden;
display: none;
}/* CSS Document */
</style>
</head>
<body>
<SCRIPT LANGUAGE="Javascript">
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 100) {
opacity(id, 100, 0, millisec);
} else {
opacity(id, 0, 100, millisec);
}
}
//OPEN DIV code
javascript:opacity('help1', 0, 100, 500)
//CLOSE DIV code
//javascript:opacity('help1', 100, 0, 500)
</SCRIPT>
<div id="help1" class="opac_xmpl" style="width:675px; height:200px;"> awhole bunch of text
<div> <IMG height=109 alt="" src="fade00.jpg" width=109 border=0></div>
</div>
</body>
Ni idea de cómo hacerlo.
