Foros Club Delphi - Efecto FADE al Salir de Página

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)

- HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)

- - Efecto FADE al Salir de Página (https://www.clubdelphi.com/foros/showthread.php?t=63047)

Efecto FADE al Salir de Página

Hola Amigos!

Seré breve por favor:
¿Alguien conoce de algún script (alguna dirección de este script) que al ingresar y/o al salir toda la página se desvanezca?, y que funcione en IE7 y FireFox?

Quizá no me estoy explicando, he visto en algún lado (no recuerdo) que al cargar una página se observa un efecto de alphablend (fade o no se como se llama) donde toda la página desde un grado de opacidad aparece hasta volverse 100% nítida.

Y al revés al cerrar la Página o cambiar a una SubPágina, esta se desvanece desde un 100% de color hasta volverse transparente y desaparecer completamente.

He encontrado efectos de este tipo pero para imágenes, no encotré para toda una página completa.

He buscado con palabras clave en Google FadeOut, FadeIn, alphablend, desvanecimiento, etc, etc y no tuve suerte.
Lo que más me interesa es que cuando se cierre o cuando cargue sobre si misma una subpágina haga este efecto AL SALIR.
Saludos

Edito: Acabo de encontrar esa dirección:
http://www.laprensa.com.bo/noticias/27-01-09/index.php
En esta veo que normal trabaja con las flechas adelante y atrás.
Lo interasante de esta página es que al primer momento que cargas no existe ningún efecto. Pero si clickas cualquiera sección del Menú de la Izquierda o la superior (pero sobre todo cualquiera de la izquierda) recién ahí empiezan los efectos, inclusive en retroceso con las flechas o de adelante.
Por ello mencionaba que este efecto Fade debe estar solamente al SALIR, y no al entrar a una SubPágina.

Hola Deiv, lo primero que se me ocurre es que crees una capa invisible que ocupe toda la página y que esté sobre el resto de las capas. Luego en el evento onUnload buscas dicha capa y con la ayuda de javascript vas cambiando el alpha de la capa.

Para cambiar la opacidad puedes usar una función que se llame a si misma cada cierto tiempo hasta llegar a la opacidad que creas conveninte, para lo cual puedes usar la función setTimeout de javascript.

Un saúdo.

Ok, con crear esa capa, pero como le mando hacer el opacity o el alphablend? ¿Cuál sería el código por fa?

Hola,

Chico, debo ser un negado (seguro que sí) porque, yo no he sido capaz de ver ningún efecto en la página que enlazas. Ni en Internet Explorer ni en Firefox. No obstante, me atrevería a recomendarte (consejos vendo, y, para mí no tengo) jQuery, o, en su defecto, otro "framework" similar. Porque te abstraen de lo necesario para conseguir "de serie" efectos muy curiosos (y muchos más mediante "plugins") y te dan la posibilidad de programar cualquier "evento" sin preocuparte del navegador en cuestión. No sé si habrás ya estimado esta posibilidad, pero, yo, por si acaso, lo comento aquí. ;)

Cita:

Empezado por Deiv

Ok, con crear esa capa, pero como le mando hacer el opacity o el alphablend? ¿Cuál sería el código por fa?

El codígo podría ser algo como :

Página html :

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Fade Out</title>

        <script type="text/javascript" src="lib/funcion.js"></script>

    </head>

    <body>

        <div>

            <div id="inferior" 

                  style="background-color:#FF0000;width:500px height:500px;z-index:1;position:absolute;top:0px;left:0px">

                &nbsp;

            </div>

            <div id="superior" 

                 style="background-color:#555;width:500px;height:500px;z-index:2;position:absolute;top:0px;left:0px;filter:Alpha(opacity=0);opacity:0">

                &nbsp;

            </div>

        </div>

    </body>

</html>

Archivo javascript

Código:

var capa = null;

var opacidad = 0;



window.onload = function (){

        capa = document.getElementById("superior");

        capa.onclick = function Mostrar(){

                if (opacidad < 70) {

                        opacidad += 1;

                        

                        //Para IE

                        capa.style.filter = "alpha(opacity=" + opacidad + ")";

                        

                        //Para firefox, opera y safari

                        capa.style.opacity = opacidad / 100;

                        

                        if (opacidad < 70) {

                                setTimeout(Mostrar, 30)

                        }

                } else {

                        opacidad = 0;

                        

                        //Para IE

                        capa.style.filter = "alpha(opacity=" + opacidad + ")";

                        

                        //Para firefox, opera y safari

                        capa.style.opacity = opacidad / 100;

                }                

        }

}

Esto lo que hace es aplicar el estilo fade out al pinchar sobre la capa superior. El ejemplo está hecho a las prisas por lo que puse el estilo mezclado con el código html, pero te recomendaría que lo pusieses a parte en una hoja de estilos.

Como comenta David(que es el que sabe) si necesitas hacer mas modificaciones del DOM en otras partes de tu aplicación web lo mejor es que instales un framework, y volviendo al consejo del Sabio, jQuery es de los mejores.

Un saúdo.

Hola dec,
El efecto que menciono al ingresar no pasa nada, pero si clickas alguna opción de su menu de la izquierda recien empiezan estos efectos cuando se carga una de sus subpáginas, o si clickas en las flechas de ir atrás en el Explorer, o mejor dicho si empiezas a navegar sobre esa página y en especial enlazas bastante con la opción PORTADA, lo vi en IE, no se si funciona en FireFox

Cita:

Empezado por dec

No obstante, me atrevería a recomendarte (consejos vendo, y, para mí no tengo) jQuery,

En lo que buscaba trucos o algunos códigos sobre este efecto, evidentemente ya había encontrado esa página, pero no le di mucha importancia, ya que no encontré un ejemplo práctico (puede q no haya buscado bien) en su web para lo que yo requeria.

Cita:

Empezado por dec

Porque te abstraen de lo necesario para conseguir "de serie" efectos muy curiosos (y muchos más mediante "plugins") y te dan la posibilidad de programar cualquier "evento" sin preocuparte del navegador en cuestión. No sé si habrás ya estimado esta posibilidad

Pero ahora me ha interesado saber un poco por lo que mencionas sobre eso de "sin preocuparte del navegador en cuestión", podrías ampliarme un poco mas sobre esto por fa?.
He descargado el JS de jQuery, no se si lo utiliza tal como los JS llamando desde el archivo HTML, por eso no me atreví a experimentar con este JS.
Por otro lado, estoy teniendo problemas con las cabeceras DTD, pues voy comprobando un diseño en IE, FireFox, Safary y Opera, pero en estos dos últimos por alguna razón se descolocan algunos DIVs, y algunos JScripts que tengo no funcionan en FireFox, pero si cambio la Cabecera DTD me funcionan en Firefox, quise abrir otro hilo con una pregunta: ¿Cuál es el mejor DTD (promedio) que funcione tanto en IE y Firefox?, pero me ha interesado, eso de, redundo: "sin preocuparte del navegador en cuestión" que mencionas, por que quizá entonces con este jQuery, ya no tendría que preocuparme de estas pre-preguntas que hiciera al abrir un nuevo hilo; aunque no se si existen ventajas y desventajas con la utilización de este script, por ello me gustaría saber más al respecto y si alguien ha trabajado ya con el mismo y que opinan al respecto?

Pd.- Gracias a Ivanzinho, probare el código en Casa, ya que me encuentro en un cyber y necesito ver con calma todo ello y luego os comento, vale?

Hola,

Respecto de jQuery:

Cita:

Empezado por Deiv

El mejor punto de entrada a jQuery es su sitio web, que, te da acceso, por ejemplo, a su documentación y a su "ayuda rápida". Cada apartado de la documentación se acompaña de uno o varios ejemplos. No encontrarás ejemplos "en abstracto" sobre jQuery, más allá de su documentación, y es que, por decirlo de alguna manera, jQuery es una base sobre la que construir. Eso sí, encontrarás ejemplos de los diferentes plugins existentes. Pero, no te asustes, en todo caso, ¡se trata de hacer las cosas más sencillas, no más complicadas!

Cita:

Empezado por Deiv

Pero ahora me ha interesado saber un poco por lo que mencionas sobre eso de "sin preocuparte del navegador en cuestión", podrías ampliarme un poco mas sobre esto por fa?.

Fíjate en la siguiente línea de código:

Código:

$('#container').hide().fadeIn(2000);

Eso puede traducirse como "Oculta el elemento con ID "container", independientemente de que esté o no visible, y luego aplica un efecto "fade" de modo que dicho elemento termine apareciendo al cabo de dos segundos". Ahora bien, ¿cómo se oculta el elemento? ¿Cómo se lleva a cabo el efecto "fade"? Digamos que a nosotros esto no nos interesa: lo lleva a cabo jQuery, en todos los navegadores "soportados", en unos de una forma, quizá, en otros de otra: a nosotros nos abstrae de eso la biblioteca jQuery.

Cita:

Empezado por Deiv

He descargado el JS de jQuery, no se si lo utiliza tal como los JS llamando desde el archivo HTML, por eso no me atreví a experimentar con este JS.

Es un archivo Javascript como otro cualquiera. La biblioteca jQuery reside en un archivo Javascript que has de incluir en tus documentos HTML de la misma forma en que incluyes cualquier otro archivo. A partir de ahí ya podrás hacer uso de jQuery, como harías con cualquier otro recurso previamente incluido.

Cita:

Empezado por Deiv

Por otro lado, estoy teniendo problemas con las cabeceras DTD, pues voy comprobando un diseño en IE, FireFox, Safary y Opera, pero en estos dos últimos por alguna razón se descolocan algunos DIVs, y algunos JScripts que tengo no funcionan en FireFox, pero si cambio la Cabecera DTD me funcionan en Firefox, quise abrir otro hilo con una pregunta: ¿Cuál es el mejor DTD (promedio) que funcione tanto en IE y Firefox?, pero me ha interesado, eso de, redundo: "sin preocuparte del navegador en cuestión" que mencionas, por que quizá entonces con este jQuery, ya no tendría que preocuparme de estas pre-preguntas que hiciera al abrir un nuevo hilo; aunque no se si existen ventajas y desventajas con la utilización de este script, por ello me gustaría saber más al respecto y si alguien ha trabajado ya con el mismo y que opinan al respecto?

La verdad es que nunca he tenido problemas en este sentido. Suelo comenzar los documentos HTML de la misma manera, desde hace años:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

 xml:lang="es" lang="es">

Y, a partir de ahí el "header" y todo lo demás. Con eso no he tenido problemas. Pero, igual te refieres a otra cosa. Para terminar, creo que sería bien que le entrases a jQuery: es una herramienta excelente, que evita quebraderos de cabeza y mucho, mucho trabajo. No digo que no sigas aprendiendo Javascript ni nada parecido, pero, sí que no dejes de echar un vistazo a lo que puede hacer por ti jQuery. ;)