FTP | CCD | Buscar | Trucos | Trabajo | Foros |
|
Registrarse | FAQ | Miembros | Calendario | Guía de estilo | Temas de Hoy |
|
Herramientas | Buscar en Tema | Desplegado |
#1
|
|||
|
|||
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. |
#2
|
||||
|
||||
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.
__________________
Si no lees esto no vivirás tranquilo Non lle poñades chatas â obra namentras non se remata. O que pense que vai mal que traballe n’ela; hai sitio para todos. (Castelao) |
#3
|
|||
|
|||
Ok, con crear esa capa, pero como le mando hacer el opacity o el alphablend? ¿Cuál sería el código por fa?
|
#4
|
||||
|
||||
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í. |
#5
|
||||
|
||||
Cita:
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"> </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"> </div> </div> </body> </html> 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; } } } 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.
__________________
Si no lees esto no vivirás tranquilo Non lle poñades chatas â obra namentras non se remata. O que pense que vai mal que traballe n’ela; hai sitio para todos. (Castelao) Última edición por Ivanzinho fecha: 29-01-2009 a las 01:08:21. Razón: Correción d error en código |
#6
|
|||
|
|||
jQuery?
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:
Cita:
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? Última edición por Deiv fecha: 29-01-2009 a las 14:16:17. |
#7
|
||||
|
||||
Hola,
Respecto de jQuery: Cita:
Cita:
Código:
$('#container').hide().fadeIn(2000); Cita:
Cita:
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"> |
|
|
Temas Similares | ||||
Tema | Autor | Foro | Respuestas | Último mensaje |
Ayuda Con Fade in y Fade out en Video | ColdFusion | Gráficos | 0 | 24-01-2009 17:50:46 |
Salir de una página web | altp | .NET | 10 | 02-04-2008 09:25:38 |
Salir de un While | alfredosg19 | Varios | 5 | 17-03-2005 02:09:07 |
fade de audio | ebeltete | Varios | 1 | 03-03-2005 22:37:18 |
Efecto Kodak | obiwuan | Humor | 1 | 03-05-2003 22:01:12 |
|